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>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
