JQueryul label drop-down menu DEMO code _ jquery

The jQueryul label drop-down menu demonstrates Code. For details about the jquery-based drop-down menu effects, refer. This is the menu content. Use ul label to implement the menu:

The Code is as follows:

• Menu 1
  
  
  
  • Sub menu 1
  
  
  • Sub menu 2
    
    • Sub-menu 7
    
    
  
  
  • Sub menu 3
  
  
  
  


• Menu 2
  
  
  
  • Sub menu 4
  
  
  • Sub menu 5
  
  
  • Sub menu 6
  
  
  
  

This is the CSS control code:

The Code is as follows:

Ul, ol, li {list-style: none; padding: 0px; margin: 0px ;}
# Menu * {line-height: 30px ;}
# Menu {
Text-decoration: none;
Display: block;
}
# Menu ul {
Text-align: left;
Background: #333;
}
# Menu. arrow {/* The right arrow of the menu item */
Float: right;
Padding-right: 5px;
}
# Menu> ul {height: 30px;}/* the top menu bar height can be maintained even if no menu item exists. */
/* Level-1 menu */
# Menu> ul> li {
Text-align: center;
Display: inline-block;
Width: 80px;
}
# Menu> ul> li> a {color: # fff ;}
# Menu> ul> li: hover {background: #666 ;}
/* Drop-down menu bar */
# Menu> ul> li ul {
Display: none;
Width: 150px;
Position: absolute;
Background: # c1cd94;
Box-shadow: 2px 2px 2px #000;
-Webkit-box-shadow: 2px 2px 2px #000;
-Moz-box-shadow: 2px, 2px, 2px #123;
}
/* Menu items in the drop-down menu */
# Menu> ul> li> ul li {padding-left: 5px; position: relative ;}
# Menu> ul> li> ul li> a {color: #000 ;}
# Menu> ul> li> ul li: hover {background: # d3dbb3 ;}
/* Positioning of level 3 and below menu items */
# Menu> ul> li ul {left: 150px; top: 0px ;}

This is the JS control code:

The Code is as follows:

$ (Document). ready (function ()
{
/* Menu initialization */
$ ('# Menu> ul> li> ul '). find ('li: has (ul: not (: empty)> '). append (">"); // Add the '>' symbol to the menu item with sub-menus
$ ("# Menu> ul> li"). bind ('mouseover', function () // move the cursor of the top menu item
{
$ (This). children ('ul '). slideDown ('fast ');
}). Bind ('mouseleave ', function () // move the cursor out of the top menu item
{
$ (This). children ('ul '). slideUp ('fast ');
});
$ ('# Menu> ul> li> ul li'). bind ('mouseover', function () // move the cursor in the sub-menu
{
$ (This). children ('ul '). slideDown ('fast ');
}). Bind ('mouseleave ', function () // move the cursor out of the sub-menu
{
$ (This). children ('ul '). slideUp ('fast ');
});
});