diff --git a/server/documents/hotfix.html.eco b/server/documents/hotfix.html.eco
index 2f8a98f01..102eaf6f3 100755
--- a/server/documents/hotfix.html.eco
+++ b/server/documents/hotfix.html.eco
@@ -8,19 +8,44 @@ type   : 'Library'
 <%- @partial('header') %>
 
 <script type='text/javascript'>
-$(function () {
-    $('.ui.selection.dropdown').dropdown();
+$(function(){
+    $('.dropdown').dropdown({
+        onChange: function (val) {
+            alert(val);
+        }
+    });
 });
 </script>
 
-<div class="ui selection dropdown">
-    <input id="credit_card_exp_month" name="credit_card[exp_month]" type="hidden" />
-    <div class="default text">Select Option</div>
-    <div class="menu">
-        <div class="item"></div>
-        <div class="item" data-value="option1">Option 1</div>
-        <div class="item" data-value="option2">Option 2</div>
-    </div>
+<div class="ui dropdown">
+    <input type="hidden" name="gender"/>
+    <div class="text">Gender</div>
+    <i class="dropdown icon"></i>
+      <div class="menu">
+        <div class="item" data-value="0">Male</div>
+        <div class="item">
+            <i class="dropdown icon"></i>
+            SEcond
+              <div class="menu">
+             <div class="item" data-value="1">Female</div>
+             <div class="item">
+                  <i class="dropdown icon"></i>
+                  Third
+                  <div class="menu">
+                     <div class="item" data-value="3">Nothing</div>
+                  </div>
+            </div>
+                   <div class="item">
+                  <i class="dropdown icon"></i>
+                  Fourth
+                  <div class="menu">
+                     <div class="item" data-value="4">Something</div>
+                  </div>
+            </div>
+         </div>
+        
 </div>
+
+
 </body>
 
diff --git a/src/modules/dropdown.js b/src/modules/dropdown.js
index 761541ff6..03e73c88e 100755
--- a/src/modules/dropdown.js
+++ b/src/modules/dropdown.js
@@ -181,17 +181,21 @@ $.fn.dropdown = function(parameters) {
 
             mouseenter: function(event) {
               var
-                $currentMenu = $(this).find(selector.menu),
+                $currentMenu = $(this).find(selector.submenu),
                 $otherMenus  = $(this).siblings(selector.item).children(selector.menu)
               ;
-              if( $currentMenu.size() > 0 ) {
+              if($currentMenu.length > 0  || $otherMenus.length > 0) {
                 clearTimeout(module.itemTimer);
-                module.itemTimer = setTimeout(function() {
-                  module.animate.hide(false, $otherMenus);
-                  module.verbose('Showing sub-menu', $currentMenu);
-                  module.animate.show(false,  $currentMenu);
+                  module.itemTimer = setTimeout(function() {
+                  if($otherMenus.length > 0)
+                    module.animate.hide(false, $otherMenus.filter(':visible'));
+                  if ($currentMenu.length > 0) {
+                    module.verbose('Showing sub-menu', $currentMenu);
+                    module.animate.show(false, $currentMenu);
+                  }
                 }, settings.delay.show * 2);
                 event.preventDefault();
+                event.stopPropagation();
               }
             },
 
@@ -899,10 +903,11 @@ $.fn.dropdown.settings = {
   },
 
   selector : {
-    menu  : '.menu',
-    item  : '.menu > .item',
-    text  : '> .text',
-    input : '> input[type="hidden"]'
+    menu    : '.menu',
+    submenu : '> .menu',
+    item    : '.menu > .item',
+    text    : '> .text',
+    input   : '> input[type="hidden"]'
   },
 
   className : {