add menu header code

4 files changed, 124 insertions, 20 deletions

diff --git a/demo/index.html b/demo/index.html
index 01f35e2..b542766 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -279,19 +279,45 @@
             <div class="columns">
                 <div class="column col-3">
                     <menu class="menu">
-                        <div class="menu-item">
-                            Slack
-                        </div>
-                        <a class="menu-item" href="#">
-                            Hipchat
-                        </a>
-                        <div class="menu-item">
-                            Skype
-                        </div>
+                        <menuitem class="menu-item">
+                            <a href="#">
+                                My profile
+                            </a>
+                        </menuitem>
+                        <menuitem class="divider"></menuitem>
+                        <menuitem class="menu-item">
+                            <a href="#">
+                                Settings
+                            </a>
+                        </menuitem>
+                        <menuitem class="menu-item">
+                            <a href="#">
+                                Logout
+                            </a>
+                        </menuitem>
                     </menu>
                 </div>
-                <div class="column">
-
+                <div class="column col-3">
+                    <ul class="menu">
+                        <li class="menu-header">
+                            <span class="menu-header-text">
+                                Go to
+                            </span>
+                        </li>
+                        <li class="menu-item">
+                            <a href="#">
+                                Slack
+                            </a>
+                        </li>
+                        <li class="menu-item">
+                            <a href="#">
+                                Hipchat
+                            </a>
+                        </li>
+                        <li class="menu-item">
+                            Skype
+                        </li>
+                    </ul>
                 </div>
             </div>
         </section>
diff --git a/dist/spectre.css b/dist/spectre.css
index 27c2947..3e1f1b4 100644
--- a/dist/spectre.css
+++ b/dist/spectre.css
@@ -396,7 +396,7 @@ a {
 }
 a:hover,
 a:focus {
-  color: #3b49af;
+  color: #283176;
 }
 h1,
 h2,
@@ -1020,20 +1020,57 @@ textarea.form-input {
 .menu .menu-item {
   display: block;
   padding: .2rem 1rem;
+  margin-top: 0;
   border-radius: 3px;
   color: #333;
   line-height: 2.4rem;
-  cursor: pointer;
   text-decoration: none;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
 }
-.menu .menu-item:hover,
-.menu .menu-item:focus {
+.menu .menu-item a {
+  display: block;
+  margin: -0.2rem -1rem;
+  padding: .2rem 1rem;
+  border-radius: 3px;
+  color: inherit;
+  text-decoration: none;
+}
+.menu .menu-item a:hover {
   background-color: #efefef;
 }
+.menu .menu-header {
+  display: block;
+  padding: .2rem 1rem;
+  margin-top: 0;
+  font-size: 1.2rem;
+  line-height: 1.8rem;
+  color: #cccccc;
+}
+.menu .menu-header .menu-header-text {
+  display: inline-block;
+  padding: 0 .6rem;
+  margin-left: -0.6rem;
+  background-color: #fff;
+  position: relative;
+  z-index: 99;
+}
+.menu .menu-header:after {
+  content: "";
+  display: block;
+  width: 100%;
+  height: 1px;
+  -webkit-transform: translateY(-10px);
+          transform: translateY(-10px);
+  border-bottom: 1px solid #efefef;
+}
+.menu .divider {
+  display: block;
+  border-bottom: 1px solid #efefef;
+  margin: .5rem;
+}
 .clearfix::after,
 .container::after,
 .columns::after {
diff --git a/src/base.less b/src/base.less
index d197d3b..3eda371 100644
--- a/src/base.less
+++ b/src/base.less
@@ -22,6 +22,6 @@ a {
 
   &:hover,
   &:focus {
-    color: darken(@core-link-color, 10%);
+    color: darken(@core-link-color, 25%);
   }
 }
diff --git a/src/menus.less b/src/menus.less
index 8235b4a..cb69690 100644
--- a/src/menus.less
+++ b/src/menus.less
@@ -13,16 +13,57 @@
   .menu-item {
     display: block;
     padding: .2rem 1rem;
+    margin-top: 0;
     border-radius: 3px;
     color: @body-font-color;
     line-height: 2.4rem;
-    cursor: pointer;
     text-decoration: none;
     user-select: none;
 
-    &:hover,
-    &:focus {
-      background-color: @core-border-color;
+    a {
+      display: block;
+      margin: -.2rem -1rem;
+      padding: .2rem 1rem;
+      border-radius: 3px;
+      color: inherit;
+      text-decoration: none;
+
+      &:hover {
+        background-color: @core-border-color;
+      }
+    }
+  }
+
+  .menu-header {
+    display: block;
+    padding: .2rem 1rem;
+    margin-top: 0;
+    font-size: 1.2rem;
+    line-height: 1.8rem;
+    color: lighten(@body-font-color, 60%);
+
+    .menu-header-text {
+      display: inline-block;
+      padding: 0 .6rem;
+      margin-left: -.6rem;
+      background-color: #fff;
+      position: relative;
+      z-index: 99;
+    }
+
+    &:after {
+      content: "";
+      display: block;
+      width: 100%;
+      height: 1px;
+      transform: translateY(-10px);
+      border-bottom: 1px solid @core-border-color;
     }
   }
+
+  .divider {
+    display: block;
+    border-bottom: 1px solid @core-border-color;
+    margin: .5rem;
+  }
 }