快速实现jQuery多级菜单效果
利用js或者jquery最快速实现导航条的多级菜单效果。
我这个代码用的是jquery1.9.1，ie8以下的兼容有待考虑，主要是代码的简介性，writeless,domore.
<!DOCTYPEhtml>
<htmllang="en">
<metacharset="utf-8">
<head>
<title></title>
<styletype="text/css">
.top-nav
{
font-size:12px;
font-weight:bold;
list-style:none;
}
.top-navli
{
float:left;
list-style:none;
margin-right:1px;
}
.top-navlia
{
line-height:20px;
text-decoration:none;
background:#DDDDDD;
color:#666666;
display:block;
width:80px;
text-align:center;
}
.top-navlia:hover
{
background:#900;
color:#FFF;
}
.top-navul
{
list-style:none;
display:none;
width:80px;
padding:0;
position:relative;
}
.top-navliulliul
{
position:absolute;
top:0;
left:80px;
}
</style>
</head>
<body>
<ulclass="top-nav">
<li><ahref="#">首页内容</a>
<ul>
<li><ahref="#">前端课程+</a>
<ul>
<li><ahref="#">javascript</a></li>
<li><ahref="#">css</a></li>
<li><ahref="#">jquery</a></li>
</ul>
</li>
<li><ahref="#">手机开发</a>
<ul>
<li><ahref="#">ios开发</a></li>
<li><ahref="#">android开发</a></li>
<li><ahref="#">WP开发</a></li>
</ul>
</li>
<li><ahref="#">后台编程</a></li>
</ul>
</li>
<li><ahref="#">课程大厅</a></li>
<li><ahref="#">学习中心+</a>
<ul>
<li><ahref="#">前端课程+</a>
<ul>
<li><ahref="#">javascript</a></li>
<li><ahref="#">css</a></li>
<li><ahref="#">jquery</a></li>
</ul>
</li>
<li><ahref="#">手机开发</a>
<ul>
<li><ahref="#">ios开发</a></li>
<li><ahref="#">android开发</a></li>
<li><ahref="#">WP开发</a></li>
</ul>
</li>
<li><ahref="#">后台编程</a></li>
</ul>
</li>
<li><ahref="#">关于我们</a></li>
</ul>
</script>
<scripttype="text/javascript"src="jquery-1.9.1.min.js"></script>
<scripttype="text/javascript">
$(function(){
$(".top-navli").hover(function(){
$(this).has("ul").children("ul").fadeIn();
},function(){
$(this).has("ul").children("ul").hide();
});
})
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。