jquery+div+css二级菜单的实现代码
本文导语: jquery结合div、css实现的二级菜单效果。 代码： 1，css代码 代码示例: #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; ...
jquery结合div、css实现的二级菜单效果。
代码：
1，css代码
#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;}
2，div部分
3，jquery代码部分
$(document).ready(function () {
$(".li").each(function () {
$(this).mouseover(function () {
$(this).children(".nav2").css("display", "block");
})
$(this).mouseleave(function () {
$(this).children(".nav2").css("display", "none");
})
});
});
您可能感兴趣的文章:
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。