87,904
社区成员
发帖
与我相关
我的任务
分享IE9中无法显示二级菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS+CSS实现的二级下(www.webdm.cn)</title>
<style type="text/css">
body, html { padding:0; margin:0; text-align:center; font:normal 18px 'arial'; background:#CCC;}
#mainNavBar { width:100%; background:#000; padding:10px 0; }
#nav { width:760px; height:30px; margin:0 auto; }
#nav ul { padding:0; margin:0; }
#nav ul li { position:relative; float:left; width:110px; height:30px; line-height:30px; overflow:hidden; list-style-type:none; }
#nav{ background-color:#667; }
#nav ul li a { display:block; color:#fff; text-decoration:none;outline:none; }
#nav ul li a:hover { font-weight:bold; background-color:#666; }
#subNav { position:absolute; width:100px; top:30px; left:0px; padding:5px; background-color:#667; color:#fff; text-align:left; } /*仅IE9支持；*/
#subNav a { text-decoration:none; font-weight:normal; display:block; }
#subNav a:hover { color:#f00; background:#fff; }
</style>
</head>
<body>
<div id="mainNavBar">
<div id="nav">
<ul>
<li><a href="#">首页</a></li>
<li> <a href="#">about us</a>
<div id="subNav"> <a href="#">我们的团队</a> <a href="#">项目展示</a> </div>
</li>
<li> <a href="#">我们的设计</a>
<div id="subNav"> <a href="#">平面设计</a> <a href="#">3D效果</a>
</div>
</li>
<li> <a href="http://www.3dmax.com">成功案例</a>
<div id="subNav"> <a href="http://www.baidu.com"> 时尚大气</a> <a href="http://www.qq.com"> 高贵</a> <a href="http://www.fuck.com"> 热情</a> </div>
</li>
<li> <a href="#">联系我们</a>
<div id="subNav"> <a href="#">我们的地址</a> <a href="#">我们的未来</a> <a href="#">加入我们</a> </div>
</li>
</ul>
</div>
</div>
<script language="javascript">
var nav=document.getElementById("nav").getElementsByTagName("li");
for(i=0;i<nav.length;i++){
nav[i].onmouseover=function(){
this.style.fontWeight="bold";
this.style.display="block";
this.style.overflow="visible";
this.style.background="#666666";
this.style.border="none";
}
nav[i].onmouseout=function(){
this.style.fontWeight="normal";
this.style.background="#000"
this.style.overflow="hidden";
}
}
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS+CSS实现的二级下(www.webdm.cn)</title>
<style type="text/css">
body, html { padding:0; margin:0; text-align:center; font:normal 18px 'arial'; background:#CCC;}
#mainNavBar { width:100%; background:#000; padding:10px 0; }
#nav { width:760px; height:30px; margin:0 auto; }
#nav ul { padding:0; margin:0; }
#nav ul li { position:relative; float:left; width:110px; height:30px; line-height:30px; overflow:hidden; list-style-type:none; }
#nav{ background-color:#667; }
#nav ul li a { display:block; color:#fff; text-decoration:none;outline:none; }
#nav ul li a:hover { font-weight:bold; background-color:#666; }
#subNav { position:absolute; width:100px; top:30px; left:0px; padding:5px; background-color:#667; color:#fff; text-align:left; } /*仅IE9支持；*/
#subNav a { text-decoration:none; font-weight:normal; display:block; }
#subNav a:hover { color:#f00; background:#fff; }
</style>
</head>
<body>
<div id="mainNavBar">
<div id="nav">
<ul>
<li><a href="#">首页</a></li>
<li> <a href="#">about us</a>
<div id="subNav"> <a href="#">我们的团队</a> <a href="#">项目展示</a> </div>
</li>
<li> <a href="#">我们的设计</a>
<div id="subNav"> <a href="#">平面设计</a> <a href="#">3D效果</a>
</div>
</li>
<li> <a href="http://www.3dmax.com">成功案例</a>
<div id="subNav"> <a href="http://www.baidu.com"> 时尚大气</a> <a href="http://www.qq.com"> 高贵</a> <a href="http://www.fuck.com"> 热情</a> </div>
</li>
<li> <a href="#">联系我们</a>
<div id="subNav"> <a href="#">我们的地址</a> <a href="#">我们的未来</a> <a href="#">加入我们</a> </div>
</li>
</ul>
</div>
</div>
<script language="javascript">
var nav=document.getElementById("nav").getElementsByTagName("li");
for(i=0;i<nav.length;i++){
nav[i].onmouseover=function(){
this.style.fontWeight="bold";
this.style.display="block";
this.style.overflow="visible";
this.style.background="#666666";
this.style.border="none";
}
nav[i].onmouseout=function(){
this.style.fontWeight="normal";
this.style.background="#000"
this.style.overflow="hidden";
}
}
</script>
</body>
</html>
...全文
请发表友善的回复…
发表回复
