diff --git a/docs/menu.html b/docs/menu.html
index 7f26b9e9a..d60be250a 100755
--- a/docs/menu.html
+++ b/docs/menu.html
@@ -38,7 +38,7 @@
     <div class="item"><a href="module.html"><b>Introduction</b></a></div>
     <div class="item"><a href="download"><b>Download</b></a></div>
     <div class="item">
-      <a href="#"><b>UI Collections</b></a>
+      <a><b>UI Collections</b></a>
       <div class="menu">
         <div class="item"><a href="form.html">Forms</a></div>
         <div class="active item"><a href="menu.html">Menu</a></div>
@@ -48,7 +48,7 @@
       </div>
     </div>
     <div class="item">
-      <a href="#"><b>UI Elements</b></a>
+      <a><b>UI Elements</b></a>
       <div class="menu">
         <div class="item"><a href="steps.html">Steps</a></div>
         <div class="item"><a href="button.html">Button</a></div>
@@ -67,7 +67,7 @@
       </div>
     </div>
     <div class="item">
-      <a href="#"><b>UI Views</b></a>
+      <a><b>UI Views</b></a>
       <div class="menu">
         <div class="item"><a href="form.html">Forms</a></div>
         <div class="item"><a href="activity.html">Activity Feed</a></div>
@@ -76,7 +76,7 @@
       </div>
     </div>
     <div class="item">
-      <a href="#"><b>UI Modules</b></a>
+      <a><b>UI Modules</b></a>
       <div class="menu">
         <div class="item"><a href="accordion.html">Accordion</a></div>
         <div class="item"><a href="chatroom.html">Chat Room</a></div>
@@ -89,7 +89,7 @@
       </div>
     </div>
     <div class="item">
-      <a href="#"><b>Behavioral Modules</b></a>
+      <a><b>Behavioral Modules</b></a>
       <div class="menu">
         <div class="item"><a href="api.html">API</a></div>
         <div class="item"><a href="animation.html">Animation</a></div>
@@ -205,10 +205,10 @@
         Site Title
       </div>
       <div class="active item">
-        <a href="#">Current section</a>
+        <a>Current section</a>
       </div>
       <div class="item">
-        <a href="#">Grouped Section</a>
+        <a>Grouped Section</a>
         <div class="menu">
           <a class="item">Subsection 1</a>
           <a class="item">Subsection 1</a>
@@ -282,7 +282,7 @@
     <p>A menu may contain another menu nested inside an item that acts as a grouped sub-menu. This is only available when using a vertical menu.</p>
     <div class="ui vertical menu">
       <div class="item">
-        <a href="#">Grouped Section</a>
+        <a>Grouped Section</a>
         <div class="menu">
           <a class="item">Subsection 1</a>
           <a class="item">Subsection 1</a>
@@ -305,7 +305,7 @@
         Site Title
       </div>
       <div class="active item">
-        <a href="#">Current section</a>
+        <a>Current section</a>
       </div>
       <div class="right menu">
         <div class="dropdown item">
@@ -328,7 +328,7 @@
         Site Title
       </div>
       <div class="active item">
-        <a href="#">Current section</a>
+        <a>Current section</a>
       </div>
       <div class="right menu">
         <div class="dropdown item">
@@ -351,10 +351,10 @@
         Site Title
       </div>
       <div class="active item">
-        <a href="#">Current section</a>
+        <a>Current section</a>
       </div>
       <div class="item">
-        <a href="#">Grouped Section</a>
+        <a>Grouped Section</a>
         <div class="menu">
           <a class="item">Subsection 1</a>
           <a class="item">Subsection 1</a>
@@ -380,7 +380,7 @@
         Site Title
       </div>
       <div class="active item">
-        <a href="#">Current section</a>
+        <a>Current section</a>
       </div>
       <div class="right menu">
         <div class="dropdown item">
@@ -406,10 +406,10 @@
         Site Title
       </div>
       <div class="active item">
-        <a href="#">Current section</a>
+        <a>Current section</a>
       </div>
       <div class="item">
-        <a href="#">Another section</a>
+        <a>Another section</a>
       </div>
     </div>
     <br><br>
@@ -418,7 +418,7 @@
         Site Title
       </div>
       <div class="active item">
-        <a href="#">Current section</a>
+        <a>Current section</a>
       </div>
       <div class="dropdown item">
         Dropdown <i class="icon right-dir"></i>
@@ -438,10 +438,10 @@
         Site Title
       </div>
       <div class="active item">
-        <a href="#">Current section</a>
+        <a>Current section</a>
       </div>
       <div class="item">
-        <a href="#">Grouped Section</a>
+        <a>Grouped Section</a>
         <div class="menu">
           <a class="item">Subsection 1</a>
           <a class="item">Subsection 1</a>
@@ -463,10 +463,10 @@
         Site Title
       </div>
       <div class="active item">
-        <a href="#">Current section</a>
+        <a>Current section</a>
       </div>
       <div class="item">
-        <a href="#">Grouped Section</a>
+        <a>Grouped Section</a>
         <div class="menu">
           <a class="item">Subsection 1</a>
           <a class="item">Subsection 1</a>
diff --git a/src/ui/flat/menu.css b/src/ui/flat/menu.css
index 2a2a14b28..21a0baf3b 100755
--- a/src/ui/flat/menu.css
+++ b/src/ui/flat/menu.css
@@ -226,6 +226,47 @@
   right: 0px;
 }
 
+/*--------------
+  Notification 
+---------------*/
+.ui.menu .item .alert {
+  position: absolute;
+  top: -8px;
+  left: 75%;
+
+  background-color: #EEEEEE;
+  padding: 3px 5px;
+
+  background: -webkit-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%);
+  background: -moz-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%);
+  background: -o-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%);
+  background: -ms-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%);
+  background: linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%);
+
+  border: 1px solid #E5E5E5;
+
+  border-radius: 5px;
+
+  -webkit-box-shadow:
+    0px 1px 0px rgba(0, 0, 0, 0.3),
+    0px 1px 0px rgba(255, 255, 255, 0.6) inset
+  ;
+  -moz-box-shadow:
+    0px 1px 0px rgba(0, 0, 0, 0.3),
+    0px 1px 0px rgba(255, 255, 255, 0.6) inset
+  ;
+  box-shadow:
+    0px 1px 0px rgba(0, 0, 0, 0.3),
+    0px 1px 0px rgba(255, 255, 255, 0.6) inset
+  ;
+
+  font-size: 11px;
+  line-height: 1;
+  text-transform: uppercase;
+  color: #555555;
+  z-index: 100;
+}
+
 
 
 
@@ -624,7 +665,6 @@
   -moz-box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.1) inset;
   box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.1) inset;
 
-  background-color: #F3F3F3;
   background-image: none;
 
   -webkit-transform: rotate(45deg);
@@ -664,9 +704,20 @@
   width: 12px;
   height: 12px;
 }
+
+/* Colors */
+.ui.pointing.menu .item.active:after {
+  background-color: #F3F3F3;
+}
 .ui.pointing.menu .item.active:hover:after {
   background-color: #EAEAEA;
 }
+.ui.black.pointing.menu .item.active:after {
+  background-color: #3E3E3E;
+}
+.ui.black.pointing.menu .item.active:hover:after {
+  background-color: #3B3B3B;
+}
 
 /*--------------
     Attached