一个二级导航下拉菜单请高手帮忙看看为什么去掉#nav ul li ul中的 overflow:hidden; 属性后就没有效果了？ 5
其余的我都清楚就是不知道overflow:hidden;在这里起的是什么效果和作用？<html><head><metahttp-equiv="Content-Type"c...
其余的我都清楚就是 不知道overflow:hidden;在这里起的是什么效果和作用？
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>menu</title>
<style type="text/css">
* {
padding:0;
margin:0;
}
html, body {
padding:0;
margin:0;
font-size:12px;
font-family:Arial;
}
ul, form {
padding:0;
margin:0;
}
#nav {
width:600px;
margin:0 auto;
background-color:#CCC;
height:30px;
line-height:30px;
}
#nav ul li{
list-style:none;
float:left;
width:100px;
text-align:center;
}
#nav ul li a {
text-decoration:none;
color:#000;
display:block;
}
#nav ul li a:hover {
color:#CCC;
background-color:#333;
}
#nav ul li ul {<!--为什么去掉overflow:hidden;就没有效果了-->
display:none;
overflow:hidden;
_zoom:1;
background-color:#F7F7F7;
}
#nav ul li ul li {
text-align:center;
}
#nav ul li ul li a {
padding-left:5px;
}
#nav ul li ul li a:hover {
background-color:#900;
color:#FFF;
}
#nav ul li.sfhover ul {
display:block;
}
</style>
<script type="text/javascript">
function menuFix(){
var sfEls = document.getElementById('nav').getElementsByTagName('li');
for(var i=0; i<sfEls.length; i++){
sfEls[i].onmouseover = function (){
this.className += (this.className.length>0 ? " " : "") + 'sfhover';
}
sfEls[i].onmouseout = function (){
this.className = this.className.replace(/\s*sfhover/, '');
}
}
}
window.onload = menuFix;
</script>
</head>
<body>
<div id="nav">
<ul>
<li>
<a href="index.html">产品介绍</a>
<ul>
<li><a href="sub.html">瑞星</a></li>
<li><a href="sub.html">金山词霸</a></li>
<li><a href="sub.html">QQ</a></li>
<li><a href="sub.html">MSN</a></li>
<li><a href="sub.html">Dreamweaver</a></li>
<li><a href="sub.html">Photoshop</a></li>
</ul>
</li>
<li>
<a href="index.html">服务介绍</a>
<ul>
<li><a href="sub.html">电脑维修</a></li>
<li><a href="sub.html">电脑翻新</a></li>
<li><a href="sub.html">智能升级</a></li>
<li><a href="sub.html">性能优化</a></li>
<li><a href="sub.html">安全设置</a></li>
<li><a href="sub.html">人工查询</a></li>
</ul>
</li>
<li><a href="index.html">成功案例</a></li>
<li><a href="index.html">关于我们</a></li>
<li><a href="index.html">在线演示</a></li>
<li><a href="index.html">联系我们</a></li>
</ul>
</div>
</body>
</html> 展开
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>menu</title>
<style type="text/css">
* {
padding:0;
margin:0;
}
html, body {
padding:0;
margin:0;
font-size:12px;
font-family:Arial;
}
ul, form {
padding:0;
margin:0;
}
#nav {
width:600px;
margin:0 auto;
background-color:#CCC;
height:30px;
line-height:30px;
}
#nav ul li{
list-style:none;
float:left;
width:100px;
text-align:center;
}
#nav ul li a {
text-decoration:none;
color:#000;
display:block;
}
#nav ul li a:hover {
color:#CCC;
background-color:#333;
}
#nav ul li ul {<!--为什么去掉overflow:hidden;就没有效果了-->
display:none;
overflow:hidden;
_zoom:1;
background-color:#F7F7F7;
}
#nav ul li ul li {
text-align:center;
}
#nav ul li ul li a {
padding-left:5px;
}
#nav ul li ul li a:hover {
background-color:#900;
color:#FFF;
}
#nav ul li.sfhover ul {
display:block;
}
</style>
<script type="text/javascript">
function menuFix(){
var sfEls = document.getElementById('nav').getElementsByTagName('li');
for(var i=0; i<sfEls.length; i++){
sfEls[i].onmouseover = function (){
this.className += (this.className.length>0 ? " " : "") + 'sfhover';
}
sfEls[i].onmouseout = function (){
this.className = this.className.replace(/\s*sfhover/, '');
}
}
}
window.onload = menuFix;
</script>
</head>
<body>
<div id="nav">
<ul>
<li>
<a href="index.html">产品介绍</a>
<ul>
<li><a href="sub.html">瑞星</a></li>
<li><a href="sub.html">金山词霸</a></li>
<li><a href="sub.html">QQ</a></li>
<li><a href="sub.html">MSN</a></li>
<li><a href="sub.html">Dreamweaver</a></li>
<li><a href="sub.html">Photoshop</a></li>
</ul>
</li>
<li>
<a href="index.html">服务介绍</a>
<ul>
<li><a href="sub.html">电脑维修</a></li>
<li><a href="sub.html">电脑翻新</a></li>
<li><a href="sub.html">智能升级</a></li>
<li><a href="sub.html">性能优化</a></li>
<li><a href="sub.html">安全设置</a></li>
<li><a href="sub.html">人工查询</a></li>
</ul>
</li>
<li><a href="index.html">成功案例</a></li>
<li><a href="index.html">关于我们</a></li>
<li><a href="index.html">在线演示</a></li>
<li><a href="index.html">联系我们</a></li>
</ul>
</div>
</body>
</html> 展开
2个回答
展开全部
其实是为了兼容浏览器的自动撑高
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
