Attempted to implemented unit switching

Closer but still not there, yet.

input.scss

@@ -134,23 +134,27 @@ input[type="text"]:focus {
 }
 
 .dropdown {
-    label:hover ~ label {
+    position: relative;
+    display: inline-block;
+
+    &:hover .content{
         display: block;
     }
 
-    input:checked + label {
+    .content {
-        display: block;
-    }
-
-    input {
         display: none;
-        margin: 5px;
+        position: absolute;
-        width: 100%;
+        z-index: 2;
         background: #fff;
-    }
 
-    label {
+        input {
-        display: none;
+            display: none;
-        position: relative;
+        }
+
+        label {
+            display: block;
+            margin: 5px;
+            padding: 5px;
+        }
     }
 }

styles.css

@@ -96,7 +96,20 @@ pre {
   border-radius: 3px;
   background-clip: padding-box;
   border: 1px solid #b7b7b7;
-  padding: 5px; }
+  padding: 5px;
+  overflow-x: scroll;
+  counter-reset: line; }
+  pre span {
+    display: block; }
+    pre span:before {
+      counter-increment: line;
+      content: counter(line);
+      display: inline-block;
+      border-right: 1px solid #ddd;
+      padding: 0 .5em;
+      margin-right: .5em;
+      color: #888;
+      width: 30px; }
 
 article {
   background: #fff;
@@ -3286,6 +3299,23 @@ input[type="range"] {
     flex-grow: 1;
     flex-shrink: 1; }
 
+.dropdown {
+  position: relative;
+  display: inline-block; }
+  .dropdown:hover .content {
+    display: block; }
+  .dropdown .content {
+    display: none;
+    position: absolute;
+    z-index: 2;
+    background: #fff; }
+    .dropdown .content input {
+      display: none; }
+    .dropdown .content label {
+      display: block;
+      margin: 5px;
+      padding: 5px; }
+
 .ok {
   color: #5cff56; }