Navigation CSS improvements.

docs/_sass/_s2-docs-nav.scss

@@ -1,19 +1,55 @@
 .s2-docs-nav {
   margin-bottom: 0;
   border-color: #eee;
-  background-color: #fff;
-}
+  background-color: #f6f6f6;
 
-.s2-docs-nav .navbar-brand {
-  font-weight: 500;
-  img {
-    margin-right: 4px;
+  .navbar-brand {
+    font-weight: 500;
+    img {
+      margin-right: 4px;
+    }
   }
-}
 
-.s2-docs-nav .navbar-nav > .active > a,
-.s2-docs-nav .navbar-nav > .active > a:hover,
-.s2-docs-nav .navbar-nav > .active > a:focus {
-  background-color: #f6f6f6;
-  color: #333;
+  .navbar-nav > .active > a,
+  .navbar-nav > .active > a:hover,
+  .navbar-nav > .active > a:focus {
+    background-color: #f0f0f0;
+    //background-color: #FFF;
+    color: #000;
+  }
+
+  @media (min-width: 768px) {
+
+    .navbar-nav > li > .dropdown-menu:before {
+      position: absolute;
+      top: -21px;
+      left: 24px;
+      display: block;
+      width: 0;
+      height: 0;
+      border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0.1);
+      border-style: solid;
+      border-width: 10px;
+      content: "";
+    }
+
+    .navbar-nav > li > .dropdown-menu:after {
+      position: absolute;
+      top: -20px;
+      left: 24px;
+      display: block;
+      width: 0;
+      height: 0;
+      border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #FFF;
+      border-style: solid;
+      border-width: 10px;
+      content: '';
+    }
+
+    .navbar-nav .dropdown-menu {
+      border-radius: 4px;
+      border-color: #ddd;
+      margin-top: -1px;
+    }
+  }
 }