JQuery ul label drop-down menu DEMO code

This is the menu content. Use ul label to implement the menu: Copy codeThe Code is as follows: <div id = "menu">
<Ul>
<Li> <a href = ""> menu 1 </a>
<Ul>
<Li> <a href = ""> sub-menu 1 </a> </li>
<Li> <a href = ""> sub-Menu 2 </a>
<Ul> <li> <a href = ""> sub-menu 7 </a> </li> </ul>
</Li>
<Li> <a href = ""> sub-menu 3 </a> </li>
</Ul>
</Li>
<Li> <a href = ""> menu 2 </a>
<Ul>
<Li> <a href = ""> sub-menu 4 </a> </li>
<Li> <a href = ""> sub-menu 5 </a> </li>
<Li> <a href = ""> sub-menu 6 </a> </li>
</Ul>
</Li>
</Ul>
</Div>

This is the CSS control code:Copy codeThe 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:Copy codeThe Code is as follows: $ (document). ready (function ()
{
/* Menu initialization */
$ ('# Menu> ul> li> ul '). find ('li: has (ul: not (: empty)> '). append ("<span class = 'arrow' >></span>"); // Add the '>' symbol for menu items with submenus
$ ("# 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 ');
});
});