Fixes #247 right menu formatting when used with a secondary menu. adds search formatting for secondary menu and updates docs with a more complex example

server/documents/collections/menu.html.eco

@@ -200,10 +200,9 @@ type        : 'UI Collection'
   <div class="example">
     <h4 class="ui header">Secondary Menu</h4>
     <p>A secondary menu allows for a section of content on a page to be activated</p>
-    <div class="ui secondary menu">
+    <div class="ui secondary pointing menu">
       <a class="active item">
-        <i class="users icon"></i>
-        Friends
+        <i class="home icon"></i> Home
       </a>
       <a class="item">
         <i class="mail icon"></i> Messages
@@ -211,8 +210,20 @@ type        : 'UI Collection'
       <a class="item">
         <i class="user icon"></i> Friends
       </a>
+      <div class="right menu">
+        <div class="item">
+          <div class="ui icon input">
+            <input type="text" placeholder="Search...">
+            <i class="search link icon"></i>
+          </div>
+        </div>
+        <a class="ui item">
+          Logout
+        </a>
+      </div>
     </div>
   </div>
+
   <div class="another example">
     <p>A vertical secondary menu</p>
     <div class="ui secondary vertical menu">
@@ -250,8 +261,25 @@ type        : 'UI Collection'
       <a class="item">
         <i class="user icon"></i> Friends
       </a>
+      <div class="right menu">
+        <div class="borderless vertically fitted item">
+          <div class="ui icon input">
+            <input type="text" placeholder="Search...">
+            <i class="search link icon"></i>
+          </div>
+        </div>
+        <div class="ui dropdown item">
+          Language <i class="dropdown icon"></i>
+          <div class="menu">
+            <a class="item">English</a>
+            <a class="item">Russian</a>
+            <a class="item">Spanish</a>
+          </div>
+        </div>
+      </div>
     </div>
-    <br><br>
+  </div>
+  <div class="another example">
     <div class="ui secondary pointing menu">
       <a class="active item">
         <i class="home icon"></i> Home
@@ -262,6 +290,17 @@ type        : 'UI Collection'
       <a class="item">
         <i class="user icon"></i> Friends
       </a>
+      <div class="right menu">
+        <div class="item">
+          <div class="ui icon input">
+            <input type="text" placeholder="Search...">
+            <i class="search link icon"></i>
+          </div>
+        </div>
+        <a class="ui item">
+          Logout
+        </a>
+      </div>
     </div>
   </div>
   <div class="another example">

src/collections/menu.less

@@ -772,6 +772,7 @@
   -moz-box-shadow: none;
   box-shadow: none;
 }
+.ui.secondary.menu > .menu > .item,
 .ui.secondary.menu > .item {
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
@@ -787,10 +788,17 @@
   -moz-border-radius: 0.3125em;
   border-radius: 0.3125em;
 }
+.ui.secondary.menu > .menu > .item:before,
 .ui.secondary.menu > .item:before {
   display: none !important;
 }
 
+.ui.secondary.menu .item > .input input {
+  padding-top: 0.4em;
+  padding-bottom: 0.4em;
+  background-color: transparent;
+  border: none;
+}
 .ui.secondary.menu .link.item,
 .ui.secondary.menu a.item {
   opacity: 0.8;
@@ -801,7 +809,6 @@
   -ms-transition: none;
   transition: none;
 }
-
 .ui.secondary.menu .header.item {
   border-right: 0.1em solid rgba(0, 0, 0, 0.1);
   background-color: transparent;
@@ -818,6 +825,7 @@
 }
 
 /* active */
+.ui.secondary.menu > .menu > .active.item,
 .ui.secondary.menu > .active.item {
   background-color: rgba(0, 0, 0, 0.08);
   opacity: 1;
@@ -862,18 +870,9 @@
 
 .ui.secondary.pointing.menu {
   border-bottom: 3px solid rgba(0, 0, 0, 0.1);
-
-}
-
-.ui.secondary.pointing.menu .header.item {
-  border-right-width: 0px;
-  font-weight: bold;
-}
-
-.ui.secondary.pointing.menu .text.item {
-  box-shadow: none !important;
 }
 
+.ui.secondary.pointing.menu > .menu > .item,
 .ui.secondary.pointing.menu > .item {
   margin: 0em 0em -3px;
   padding: 0.6em 0.95em;
@@ -900,24 +899,40 @@
     color 0.2s
   ;
 }
+
+/* Item Types */
+.ui.secondary.pointing.menu .header.item {
+  border-right-width: 0px;
+  font-weight: bold;
+}
+.ui.secondary.pointing.menu .text.item {
+  box-shadow: none !important;
+}
+.ui.secondary.pointing.menu > .menu > .item:after,
 .ui.secondary.pointing.menu > .item:after {
   display: none;
 }
 
 /* Hover */
-.ui.secondary.pointing.menu > .item.hover,
-.ui.secondary.pointing.menu > .item:hover {
+.ui.secondary.pointing.menu > .menu > .link.item:hover,
+.ui.secondary.pointing.menu > .link.item:hover,
+.ui.secondary.pointing.menu > .menu > a.item:hover,
+.ui.secondary.pointing.menu > a.item:hover {
   background-color: transparent;
   color: rgba(0, 0, 0, 0.7);
 }
 
 /* Down */
-.ui.secondary.pointing.menu > .item:active {
+.ui.secondary.pointing.menu > .menu > .link.item:active,
+.ui.secondary.pointing.menu > .link.item:active,
+.ui.secondary.pointing.menu > .menu > a.item:active,
+.ui.secondary.pointing.menu > a.item:active {
   background-color: transparent;
   border-color: rgba(0, 0, 0, 0.2);
 }
 
 /* Active */
+.ui.secondary.pointing.menu > .menu > .item.active,
 .ui.secondary.pointing.menu > .item.active {
   background-color: transparent;
   border-color: rgba(0, 0, 0, 0.4);