diff --git a/index.html b/index.html
index d1f8a5a..22fae94 100644
--- a/index.html
+++ b/index.html
@@ -28,13 +28,7 @@ section
     box-sizing: border-box;
     padding:50px;
 }
-nav
-{
-    position:fixed;
-    right:50px;
-    bottom:50px;
-    z-index:10;
-}
+
 h2
 {
     width:500px;
@@ -272,13 +266,79 @@ h2[data-spy='true']::before, h2[data-spy='true']::after
     </script>
 </head>
 <body>
+
+<style>
+.Filler
+{
+    display: flex;
+    width:50%;
+}
+.Part
+{
+    flex:1;
+    height:100px;
+    background:red;
+}
+.Part.Middle
+{
+    flex:0 0 auto;
+    background:orange;
+}
+
+</style>
+    <div class="Filler">
+        <div class="Part Cap Top"></div>
+        <div class="Part Middle">Random content</div>
+        <div class="Part Cap Bottom"></div>
+    </div>
+
+    <style>
+nav
+{
+    position: fixed;
+    top:50px;
+    right: 0px;
+    width: 200px;
+    z-index:10;
+    height: 600px;
+    background:white;
+    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
+    border-left:10px solid black;
+}
+nav ul
+{
+    margin:0;
+    padding:0;
+    text-align:right;
+}
+nav::before, nav::after
+{
+    content:" ";
+    display:block;
+    width:50px;
+    height:50px;
+    background:black;
+    position:absolute;
+    left:0;
+}
+nav::before
+{
+    top:-25px;
+}
+nav::after
+{
+    bottom:-25px;
+}
+    </style>
     <nav>
-        <a href="#top"  >Top</a>
-        <a href="#order">Order</a>
-        <a href="#video">Video</a>
-        <a href="#about">About</a>
-        <a href="#specs">Specs</a>
-        <a href="#email">Sign-up</a>
+        <ul>
+            <li><a href="#top"  >Top</a></li>
+            <li><a href="#order">Order</a></li>
+            <li><a href="#video">Video</a></li>
+            <li><a href="#about">About</a></li>
+            <li><a href="#specs">Specs</a></li>
+            <li><a href="#email">Sign-up</a></li>
+        </ul>
     </nav>
     <section id="order">
 
