dropdown menu, and fixes

static/script.js

@@ -28,3 +28,21 @@ function hidetoggle(name) {
         }}
     }
 }
+function dropDown() {
+    document.getElementById("Dropdown").classList.toggle("show");
+}
+
+// Close the dropdown menu if the user clicks outside of it
+window.onclick = function(event) {
+  if (!event.target.matches('.dropbtn')) {
+
+    var dropdowns = document.getElementsByClassName("dropdown-content");
+    var i;
+    for (i = 0; i < dropdowns.length; i++) {
+      var openDropdown = dropdowns[i];
+      if (openDropdown.classList.contains('show')) {
+        openDropdown.classList.remove('show');
+      }
+    }
+  }
+}

static/style.css

@@ -23,3 +23,47 @@ td              { height: 1.75em; }
 .error          { background: #f0d6d6; padding: 0.5em; }
 .hidden         { display: none; }
 .pointer        { cursor: pointer; }
+
+/* dropdown */
+
+.dropbtn {
+    color:  #377ba8;
+    text-decoration: underline;
+    cursor: pointer;
+    font-weight: bold;
+    letter-spacing:-0.1em;
+}
+
+/* Dropdown button on hover & focus */
+.dropbtn:hover, .dropbtn:focus {
+    background-color: #ccc;
+}
+
+/* The container <div> - needed to position the dropdown content */
+.dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+/* Dropdown Content (Hidden by Default) */
+.dropdown-content {
+    display: none;
+    right: 0px;
+    position: absolute;
+    background-color: #fafafa;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+}
+
+/* Links inside the dropdown */
+.dropdown-content a {
+    padding: 12px 16px;
+    display: block;
+}
+
+/* Change color of dropdown links on hover */
+.dropdown-content a:hover {background-color: #f1f1f1}
+
+/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
+.show {display:block;}
+