CSS部分
ul,li{ list-style:none;} ul{padding:0px;margin:0px;} .mainBac { background-image:url(../Images/adNavBac.png); background-repeat:repeat-x; width:250px; } li { background-color:#eeeeee; } a { padding-left:50px; text-decoration:none; display:inline-block; width:200px; padding-top:3px; padding-bottom:3px; } .mainBac a{color:White;} .mainBac li a{ color:Black;} .mainBac ul{ display:none;}
***********************************************
<html>
<body>
<ul> <li class="mainBac"> <a href="#" runat="server">菜单项1</a> <ul> <li><a href="#" runat="server">子菜单项11</a></li> <li><a href="#" runat="server">子菜单项12</a></li> </ul> </li> <li class="mainBac"> <a href="#" runat="server">菜单项2</a> <ul> <li><a href="#" runat="server">子菜单项21</a></li> <li><a href="#" runat="server">子菜单项22</a></li> </ul> </li> <li class="mainBac"> <a href="#" runat="server">菜单项3</a> <ul> <li><a href="#" runat="server">子菜单项31</a></li> <li><a href="#" runat="server">子菜单项32</a></li> </ul> </li> </ul>
</body>
</html>
*********************************************
jquery部分
<script type="text/javascript" src="../js/jquery-1.5.js"></script> <script type="text/javascript"> $(document).ready(function () { //页面加载完DOM后，执行的代码 $(".mainBac > a").click(function () { //找到主菜单对应的子菜单项 var ulNode = $(this).next("ul"); ulNode.slideToggle(); }); }) </script>
