您的位置：首页 > Web前端 > JQuery

用jquery实现下拉列表

2015-01-04 16:03 211 查看

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>下拉式菜单</title>
<style type="text/css">

*{margin: 0px; padding: 0px;}/*去掉默认边距*/
#menu{background: #eee;
width: 600px;
height: 40px;
margin: 0 auto;
margin-top:100px;

}

ul{ list-style: none;
}
ul li{line-height: 40px;
float: left;
text-align: center;
position: relative;/*  与下面对的position：absolute;对应*/
}

a{text-decoration: none;display: block; padding: 0 10px; height: 40px;}
a:hover{color: yellow;
background: black;
}

ul li  ul li{
float: none;
background: #eee;
margin-top: 2px;
}

ul li  ul li a{ width: 80px;}
ul li ul{
position: absolute;
left: 0;
top: 40px;           /*与上面的positon:relative;结合使用实现一级菜单的大小不随二级菜单大小而改变 */
display: none;
}

</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$(".submenu").mouseover(function(){
$(this).children("ul").show();

})
$(".submenu").mouseout(function(){
$(this).children("ul").hide();

})

})

</script>
</head>

<body>
<div id ="menu">
<ul>
<li><a href="#">首页</a></li>
<li class="submenu"><a href="#" >最新1</a><!-- 这里要使用class，因为同名class可用多次，而一个id名只能使用一次-->
<ul>
<li><a href="#">首页你好</a></li><!--Google 如果这个a标签不设置大小会默认和一级菜单一样宽-->
<li><a href="#">最新</a>
<li><a href="#">首页</a></li>
<li><a href="#">最新</a>
</ul>
</li>
<li class="submenu"><a href="#">最新2</a>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">最新</a>
<li><a href="#">首页</a></li>
<li><a href="#">最新</a>
</ul></li>
<li class="submenu"><a href="#">最新3</a>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">最新</a>
<li><a href="#">首页</a></li>
<li><a href="#">最新</a>
</ul></li>
<li class="submenu"><a href="#">最新4</a>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">最新</a>
<li><a href="#">首页</a></li>
<li><a href="#">最新</a>
</ul></li>
</ul>
</div>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery 下拉列表

相关文章推荐

新的分享

章节导航