more updates to menu

Former-commit-id: 5819828a0e
Former-commit-id: a5d7881278

docs/javascript/semantic.js

@@ -42,7 +42,7 @@ semantic.ready = function() {
       var
         $example   = $(this).closest('.example'),
         $shape     = $example.find('.shape.module'),
-        $demo      = $example.children().slice(3).not('.annotated'),
+        $demo      = $example.children().slice(3).not('.annotated, .ignore'),
         $annotated = $example.find('.annotated'),
         $code      = $annotated.find('.code'),
         whiteSpace = new RegExp('\\n\\s{4}', 'g'),

docs/menu.html

@@ -202,7 +202,7 @@
   <div class="example">
     <h4>Vertical Menu</h4>
     <p>This example uses several menu elements, an unclickable block, a clickable text link, a clickable icon link, and a dropdown group</p>
-    <div class="ui warning block">A vertical menus width must typically be defined. An alternative is to use the fluid variation  in conjunction with ui grid.</div>
+    <div class="ui ignore warning block">A vertical menus width must typically be defined. An alternative is to use the fluid variation  in conjunction with ui grid.</div>
     <div class="ui vertical menu">
       <div class="item">
         <b>Site Title</b>
@@ -256,7 +256,7 @@
   <div class="example">
     <h4>Dropdown Item</h4>
     <p>An item may contain a list of dropdowns to chose from. By default it will appear automatically with css.</p>
-    <div class="ui warning block">
+    <div class="ui ignore warning block">
       <p>A dropdown menu will, by default, automatically show when the parent element is hovered.</p>
       <p>If you need to programmatically close the dropdown, use the "stateful" variant and the javascript state module, which will allow you to manipulate the state directly.</p>
     </div>

docs/stylesheets/example.css

@@ -249,32 +249,32 @@ a:hover {
   left: -230px;
   width: 180px;
 }
-#example .peek .panel :nth-child(1) {
+#example .peek .menu :nth-child(1) {
   border-left-color: #00B9F0;
 }
 #example .main h2.standard {
   color: #00B9F0;
 }
-#example .peek .panel :nth-child(2) {
+#example .peek .menu :nth-child(2) {
   border-left-color: #56BB73;
 }
 #example .main h2.states {
   color: #56BB73;
 }
-#example .peek .panel :nth-child(3) {
+#example .peek .menu :nth-child(3) {
   border-left-color: #EF3F49;
 }
 #example .main h2.variations {
   color: #EF3F49;
 }
-#example .peek .panel :nth-child(4) {
+#example .peek .menu :nth-child(4) {
   border-left-color: #A24096;
 }
 #example .main h2.group {
   color: #A24096;
 }
 
-#example .peek .panel {
+#example .peek .menu {
   width: 180px;
 }
 #example .sticky-wrapper.stuck {

src/ui/flat/menu.css

@@ -243,7 +243,7 @@
   min-width: 1em;
   border: 1px solid rgba(0, 0, 0, 0.1);
   background: #AAAAAA;
-  padding: 0.3em 0.5em;
+  padding: 0.3em 0.5em 0.4em;
 
   font-size: 0.9em;
   font-weight: bold;
@@ -254,10 +254,10 @@
   -moz-border-radius: 5px 5px 5px 5px;
   -webkit-border-radius: 5px 5px 5px 5px;
   border-radius: 5px 5px 5px 5px;
-  
-  -moz-box-shadow: 0px -1px 0px 1px rgba(0, 0, 0, 0.1) inset;
-  -webkit-box-shadow: 0px -1px 0px 1px rgba(0, 0, 0, 0.1) inset;
-  box-shadow: 0px -1px 0px 1px rgba(0, 0, 0, 0.1) inset;
+
+  -moz-box-shadow: 0px -0.1em 0px 1px rgba(0, 0, 0, 0.1) inset;
+  -webkit-box-shadow: 0px -0.1em 0px 1px rgba(0, 0, 0, 0.1) inset;
+  box-shadow: 0px -0.1em 0px 1px rgba(0, 0, 0, 0.1) inset;
 }
 
 
@@ -308,12 +308,13 @@
 .ui.menu .link.item:active,
 .ui.menu a.item:active,
 .ui.menu .item > a:active,
+.ui.menu .dropdown.item .menu .item.down,
 .ui.menu .dropdown.item .menu .item:active {
   background-color: rgba(0, 0, 0, 0.05);
 
-  -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset;
-  -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset;
-  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset;
+  -webkit-box-shadow: 0px 0px 2px 0 rgba(0, 0, 0, 0.15) inset;
+  -moz-box-shadow: 0px 0px 2px 0 rgba(0, 0, 0, 0.15) inset;
+  box-shadow: 0px 0px 2px 0 rgba(0, 0, 0, 0.15) inset;
 }
 
 /*--------------