jquery结合div、css实现的二级菜单效果。
代码：
1，css代码
复制代码 代码示例:
<style>
#table5 { margin-top:16px;border:solid 1px #e71212; height:148px;}
#table5 td{ }/*border:solid 1px #e71212; */
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}
#nav li {
float: left;
position: relative;
}
#nav a:link, #nav a:visited {
display: block;
}
#nav ul {
display: none;
position: absolute;
margin-top:30px;
background-color:#e7be00;
}
#nav ul li {
float: none;
}
#nav li:hover ul {
display: block;
}
.nav .li
{
position:relative;
width:100px;
float:left;
}
.nav2{
position: absolute;
display: none;
left:0;
top:0px;
background-color:#e7be00;
}
.nav2 li a:hover
{ background:none;}
</style>
2，div部分
复制代码 代码示例:
<div class="menu">
<ul id="nav" class="nav">
<li style=" padding-left:20px;"><a href="index.aspx" style="color:White" >首 页</a></li>
<li><a href="imglist.aspx?id=123" style="color:White" >
脚本学堂</a></li>
<li><a href="list.aspx?id=217" style="color:White">222222</a></li>
<li><a href="list.aspx?id=301" style="color:White">33333</a></li>
<li class="li"><a href="fenlei.aspx?id=2" style="color:White" >4444</a>
<ul class="nav2">
<li><a target=_blank href="fenlei.aspx?id=2" style=" color:White; ">7777</a></li>
<li><a target=_blank href="fenlei.aspx?id=4" style=" color:White;">8888</a></li>
<li><a target=_blank href="fenlei.aspx?id=3" style=" color:White;">99999</a></li>
<li><a target=_blank href="fenlei.aspx?id=1" style=" color:White;">155665</a></li>
</ul>
</li>
<li><a href="list.aspx?id=296" style="color:White">7878787</a></li>
<li class="menumain"><a href="liuyan.aspx" style="color:White">5875587587</a></li>
</ul>
</div>
3，jquery代码部分
复制代码 代码示例:
<script src="Scripts/jquery-1.4.1.min.js" type="text/
javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$(".li").each(function () {
$(this).mouseover(function () {
$(this).children(".nav2").css("display", "block");
})
$(this).mouseleave(function () {
$(this).children(".nav2").css("display", "none");
})
});
});
</script>
