网页中用DIV CSS控制下拉菜单怎么实现

 我来答
lssd_5
推荐于2016-10-31 · TA获得超过1245个赞
知道小有建树答主
回答量:480
采纳率:0%
帮助的人:228万
展开全部
直接是用CSS控制的下拉菜单,在各个浏览器中表现的不够完美
最佳的方法是使用jQuery来制作,代码如下:

[HTML部分]
<div id="nav">
<ul>
<li><a href="#">菜单零</a></li>
<li><a href="#">菜单一</a></li>
<ul class="childnav">
<li><a href="#">子菜单</a></li>
<li><a href="#">子菜单</a></li>
<li><a href="#">子菜单</a></li>
<li><a href="#">子菜单</a></li>
<li><a href="#">子菜单</a></li>
<li><a href="#">子菜单</a></li>
</ul>
<li><a href="#">菜单二</a>
<ul class="childnav">
<li><a href="#">子菜单</a></li>
<li><a href="#">子菜单</a></li>
<li><a href="#">子菜单</a></li>
<li><a href="#">子菜单</a></li>
<li><a href="#">子菜单</a></li>
<li><a href="#">子菜单</a></li>
</ul>
</li>
<li><a href="#">菜单四</a></li>
<!-- /nav -->
</ul>
</div>

[JS部分]
<script type="text/javascript">
$(document).ready(function(){
$("#nav ul li a").hover(function() {
$(this).parent().find("ul.childnav").slideDown('fast').show();
$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.childnav").slideUp('slow');
});
});
});
</script>

[CSS部分]
<style type="text/css">
* { padding:0; margin:0; list-style:none; }
#nav {
margin:200px;
}
#nav ul { background:#333; padding:5px; float:left; width:100%; }
#nav li {
float:left;
padding:0 5px;
position:relative;
}
#nav li a {
float:left;
padding:0 5px;
display:block;
text-align:center;
color:#fff;
text-decoration:none;
font-size:12px;
height:18px;
line-height:18px;
}
#nav li a:hover, #nav li a.on {
background:#444;
text-decoration:none;
}
#nav li ul {
display: none;
position: absolute;
left: -2px;
top: 18px;
background: #999;
border-bottom:3px solid #333;
z-index:1000;
}
#nav li ul li {
background:none;
float:none;
padding:0;
}
#nav li ul a {
float:none;
}
#nav li ul a:hover {
background:#888;
}
#nav li:hover ul, #nav li.over ul {
display: block;
z-index:999
}
</style>
太烦信7
2012-08-19 · TA获得超过145个赞
知道答主
回答量:119
采纳率:0%
帮助的人:79.5万
展开全部
大概思路是这样吧!
a:hover{display:block}
a {display:none}
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
dingqinghephp
2012-08-23 · 超过17用户采纳过TA的回答
知道答主
回答量:227
采纳率:0%
帮助的人:60.2万
展开全部
js网上有好多不同的!
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(1)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式