Code _jquery to implement Drop-down menu effects with jquery

The effect is as follows:

This is the content of the menu, with the UL tag to implement the menu:

Copy Code code as follows:

<div id= "Menu" >
<ul>
<li><a href= "" > Menu one </a>
<ul>
<li><a href= "" > submenu 1</a></li>
<li><a href= "" > submenu 2</a>
<ul><li><a href= "" > submenu 7</a></li></ul>
</li>
<li><a href= "" > submenu 3</a></li>
</ul>
</li>
<li><a href= "" > Menu two </a>
<ul>
<li><a href= "" > submenu 4</a></li>
<li><a href= "" > submenu 5</a></li>
<li><a href= "" > submenu 6</a></li>
</ul>
</li>
</ul>
</div>

This is the CSS control code:

Copy Code code as follows:

ul,ol,li{list-style:none;padding:0px;margin:0px;}
#menu *{line-height:30px;}
#menu a{
Text-decoration:none;
Display:block;
}
#menu ul{
Text-align:left;
Background: #333;
}
#menu. arrow{/* The right small arrow of the menu item * *
Float:right;
padding-right:5px;
}
#menu >ul{height:30px}/* Maintains the height of the top-level menu bar even if there are no menu items. */


/* Level 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 item for pull-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;}

/* Three level and below the location of the menu items * *
#menu >ul>li>ul>li ul{left:150px; top:0px;}
[HTML]
This is the control code of JS:
[Code]
$ (document). Ready (function ()
{
/* Menu Initialization * *
$ (' #menu >ul>li>ul '). Find (' Li:has (Ul:not (: Empty)) >a '). Append ("<span class= ' arrow ' >></ Span> "); Add ' > ' Symbols for menu items with submenus
$ ("#menu >ul>li"). Bind (' MouseOver ', function ()//The mouse movement of the top-level menu item
{
$ (this). Children (' ul '). Slidedown (' fast ');
). Bind (' MouseLeave ', function ()//The mouse movement of the top-level menu item
{
$ (this). Children (' ul '). Slideup (' fast ');
});
$ (' #menu >ul>li>ul li '). bind (' MouseOver ', function ()//submenu mouse movement
{
$ (this). Children (' ul '). Slidedown (' fast ');
). Bind (' MouseLeave ', function ()//submenu mouse move out of action
{
$ (this). Children (' ul '). Slideup (' fast ');
});
});

Source: http://www.caixw.com/archives/drop-down-menu-with-jquery.html