adds tabular menu and example

build/uncompressed/collections/menu.css

@@ -491,17 +491,19 @@
   padding-right: 1.4em;
   color: #9DA6AB;
 }
+.ui.tabular.menu .item:before {
+  display: none;
+}
+/* Hover */
 .ui.tabular.menu .item:hover {
   background-color: transparent;
   color: #5D6266;
 }
-.ui.tabular.menu .item:before {
-  display: none;
-}
+/* Active */
 .ui.tabular.menu .active.item {
   position: relative;
   top: 1px;
-  background-color: #F8F8F8;
+  background-color: #FFFFFF;
   color: #5D6266;
   border-left: 1px solid #DCDDDE;
   border-right: 1px solid #DCDDDE;

node/src/documents/collections/menu.html

@@ -114,6 +114,19 @@ type   : 'UI Collection'
     </div>
   </div>
   
+  <div class="example">
+    <h4 class="ui header">Tabular</h4>
+    <p>A message can be formatted to show tabs of information</p>
+    <div class="ui tabular menu">
+      <a class="active item">
+        Bio
+      </a>
+      <a class="item">
+        Pics
+      </a>
+    </div>
+  </div>
+  
   <div class="example">
     <h4 class="ui header">Tiered Menu</h4>
     <p>A tiered menu can show the sub-sections available as part of an activated section.</p>

node/src/files/components/semantic/collections/menu.css

@@ -491,17 +491,19 @@
   padding-right: 1.4em;
   color: #9DA6AB;
 }
+.ui.tabular.menu .item:before {
+  display: none;
+}
+/* Hover */
 .ui.tabular.menu .item:hover {
   background-color: transparent;
   color: #5D6266;
 }
-.ui.tabular.menu .item:before {
-  display: none;
-}
+/* Active */
 .ui.tabular.menu .active.item {
   position: relative;
   top: 1px;
-  background-color: #F8F8F8;
+  background-color: #FFFFFF;
   color: #5D6266;
   border-left: 1px solid #DCDDDE;
   border-right: 1px solid #DCDDDE;

src/collections/menu.less

@@ -566,9 +566,6 @@
   box-shadow: 0px 1px 0px 0px #FBFBFB;
   color: rgba(0, 0, 0, 0.8);
 }
-
-.ui.tiered.menu {
-}
 .ui.tiered.menu .sub.menu {
   background-color: rgba(0, 0, 0, 0.01);
   border-radius: 0em;
@@ -642,19 +639,22 @@
   padding-right: 1.4em;
   color: #9DA6AB;
 }
+.ui.tabular.menu .item:before {
+  display: none;
+}
+
+/* Hover */
 .ui.tabular.menu .item:hover {
   background-color: transparent;
   color: #5D6266;
 }
-.ui.tabular.menu .item:before {
-  display: none;
-}
 
+/* Active */
 .ui.tabular.menu .active.item {
   position: relative;
   top: 1px;
 
-  background-color: #F8F8F8;
+  background-color: #FFFFFF;
   color: #5D6266;
 
   border-left: 1px solid #DCDDDE;