下拉[宝典]jquery完成下拉菜单

【html】

<div id="menu"><ul>

<l i><a href="">菜一</a>

<ul>

<l i><a href="">子菜 1</a></l i>

<l i><a href="">子菜2</a>

<ul><l i><a href="">子菜 7</a></l i></ul></l i>

<l i><a href="">子菜 3</a></l i>

</ul>

</l i>

<l i><a href="">菜二</a>

<ul>

<l i><a href="">子菜 4</a></l i><l i><a href="">子菜 5</a></l i><l i><a href="">子菜 6</a></l i>

</ul>

</l i>

</ul>

</div>

【css】ul ,ol , l i{l ist­style:none;padding:0px;margin:0px;}#menu *{l ine­height:30px;}

#menua{

text­decoration:none;display:block;

}

#menu ul{text­al ign: left;background:#333;

}

#menu .arrow{ /*菜 的右小箭 */float:right;

padding­right:5px;

}

#menu>ul{height:30px;} /*即使没有菜 也能保持 菜 的高度。 *//*一菜 */

#menu>ul>l i{text­al ign:center;display: inl ine­block;width:80px;

}

#menu>ul>l i>a{color:#fff;}

#menu>ul>l i :hover{background:#666;}/*下拉的菜 */

#menu>ul>l i ul{display:none;width:150px;position:absolute;

background:#c1 cd94;box­shadow:2px 2px 2px#000;

­webkit­box­shadow:2px 2px 2px #000;

­moz­box­shadow:2px 2px 2px#123;

}

/*下拉菜的菜 */

#menu>ul>l i>ul l i{padding­left:5px; position:relative;}#menu>ul>l i>ul l i>a{color:#000;}

#menu>ul>l i>ul l i :hover{background:#d3dbb3;}/*三及以下的菜 的定位*/

#menu>ul>l i>ul>l i ul{left:150px; top:0px;}【js】

$(document).ready(function()

{

/*菜初始化 */