Add sub-menu on types page

Author: Mouq

sketch/html/css/style.css

@@ -62,6 +62,11 @@ td {
     background-color: #A0CE3D;
 }
 
+.darker-green {
+    border-color: #8BC313;
+    background-color: #8BC313;
+}
+
 .blue {
     border-color: #63A4FF;
     background-color: #80B5FF;
@@ -148,19 +153,31 @@ td {
     margin-left: auto;
     width: 100%;
     line-height: 2.5em;
-    padding: 0.3em;
 }
 
 .menu-item {
     display: inline-block;
     padding-right: 0.3em;
     font-size: 1.1em;
+    margin-top: 0.3em;
+    min-width: 4em;
 }
 
 .menu-item+.menu-item {
     border-left: 0.15em dotted #FFFFFF;
     padding-left: 0.45em;
 }
+.menu-item.selected+.menu-item {
+    border-left: none;
+}
+
+.menu-item.selected {
+    border-radius: 1em 1em 0 0;
+    box-shadow: 0.5em 0.5em 1em #888888;
+    display: inline-block;
+    border-left: none;
+    border-bottom: solid inherit;
+}
 
 #formalities { font-style: italic; }
 

sketch/html/type.html

@@ -42,11 +42,17 @@
     <div class="menu">
         <div class="menu-items dark-green">
             <a class="menu-item" href="/language">Language</a>
-            <a class="menu-item" href="/type">Types</a>
+            <span class="menu-item selected darker-green" href="/type">Types</span>
             <a class="menu-item" href="/routine">Routines</a>
             <a class="menu-item" href="/module">Modules</a>
             <a id="formalities" class="menu-item" href="/formalities">Formalities</a>
         </div>
+        <div class="menu-items darker-green">
+            <a class="menu-item" href="/language">Basic</a>
+            <a class="menu-item" href="/type">Composite</a>
+            <a class="menu-item" href="/routine">Domain-Specific</a>
+            <a class="menu-item" href="/module">Exceptions</a>
+        </div>
     </div>
 </div>
 <div id="content" class="pretty-box yellow">