请问这段用javascript写成的二级菜单代码的问题
请问这段用javascript写成的二级菜单代码,为什么在ie8/safari下正常显示,使用类似ie7,TT等浏览器时,二级菜单的文字就显示不出来?工作急用,非常感谢您...
请问这段用javascript写成的二级菜单代码,为什么在ie8/safari下正常显示, 使用类似ie7,TT等浏览器时, 二级菜单的文字就显示不出来?
工作急用,非常感谢您帮忙 ^_^
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<style type="text/css">
body {
margin: 0px;
font-family:Arial, Helvetica, sans-serif;
}
#line1 li {
float:left;
padding-right:25px;
list-style-type:none;
}
#line1 li a {
color:#FFFFFF;
}
#line1 li a:hover {
color:#333333;
}
#nav {
list-style-type: none;
margin-top:7px;
}
#nav a {
display: block;
text-align:center;
}
#nav li {
font-size:14px;
float: left;
padding-left:20px;
background-position:left;
background-repeat:no-repeat;
padding-right:20px;
color:#FFF;
}
#nav li a {
color:#FFF;
text-decoration:none;
}
#nav li ul {
line-height: 47px;
list-style-type: none;
text-align:left;
left: -999em;
width: 1000px;
position: absolute;
float:left;
}
#nav li ul li {
background-image:none;
font-size:12px;
float: left;
}
#nav li ul a {
display: block;
text-align:center;
color:#036;
}
#nav li:hover ul {
left: 0;
}
#nav li.sfhover ul {
left: 0;
}
#content {
clear: left;
}
</style>
<script type=text/javascript>
function menuFix() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls.onmouseover=function() {
menuClear();
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls.onMouseDown=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls.onMouseUp=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls.onmouseout=function() {
// this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
}
}
}
function menuClear() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls.className=sfEls.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
}
}
document.onclick=function(){
menuClear();
}
window.onload=menuFix;
</script>
<table width="1000" border="0">
<tr valign="top">
<td style="width:1000px; height:100px; background-color:#096;"><ul id="nav">
<li>全面的服务
<ul>
<li> <a href="#" target="_parent">信息系统咨询</a></li>
<li> <a href="#l" target="_parent">软件开发</a></li>
</ul>
</li>
<li >行业专长
<ul style="margin-left:100px">
<li> <a href="#" target="_parent">软件产品工程</a></li>
<li> <a href="#" target="_parent">网站及电子商务</a></li>
</ul>
</li>
</ul></td>
</tr>
</table>
china_hbi你好,你只是删掉了width: 1000px; 这一行, 还是显示不出来啊, 请注意我指的是在ie8/ff/Safari等浏览器显示正常,但在如ie7/腾讯TT/搜狗浏览器(就是大概都是ie7内核的浏览器)就都显示不出来二级菜单
再帮帮忙,多谢啊! 展开
工作急用,非常感谢您帮忙 ^_^
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<style type="text/css">
body {
margin: 0px;
font-family:Arial, Helvetica, sans-serif;
}
#line1 li {
float:left;
padding-right:25px;
list-style-type:none;
}
#line1 li a {
color:#FFFFFF;
}
#line1 li a:hover {
color:#333333;
}
#nav {
list-style-type: none;
margin-top:7px;
}
#nav a {
display: block;
text-align:center;
}
#nav li {
font-size:14px;
float: left;
padding-left:20px;
background-position:left;
background-repeat:no-repeat;
padding-right:20px;
color:#FFF;
}
#nav li a {
color:#FFF;
text-decoration:none;
}
#nav li ul {
line-height: 47px;
list-style-type: none;
text-align:left;
left: -999em;
width: 1000px;
position: absolute;
float:left;
}
#nav li ul li {
background-image:none;
font-size:12px;
float: left;
}
#nav li ul a {
display: block;
text-align:center;
color:#036;
}
#nav li:hover ul {
left: 0;
}
#nav li.sfhover ul {
left: 0;
}
#content {
clear: left;
}
</style>
<script type=text/javascript>
function menuFix() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls.onmouseover=function() {
menuClear();
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls.onMouseDown=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls.onMouseUp=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls.onmouseout=function() {
// this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
}
}
}
function menuClear() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls.className=sfEls.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
}
}
document.onclick=function(){
menuClear();
}
window.onload=menuFix;
</script>
<table width="1000" border="0">
<tr valign="top">
<td style="width:1000px; height:100px; background-color:#096;"><ul id="nav">
<li>全面的服务
<ul>
<li> <a href="#" target="_parent">信息系统咨询</a></li>
<li> <a href="#l" target="_parent">软件开发</a></li>
</ul>
</li>
<li >行业专长
<ul style="margin-left:100px">
<li> <a href="#" target="_parent">软件产品工程</a></li>
<li> <a href="#" target="_parent">网站及电子商务</a></li>
</ul>
</li>
</ul></td>
</tr>
</table>
china_hbi你好,你只是删掉了width: 1000px; 这一行, 还是显示不出来啊, 请注意我指的是在ie8/ff/Safari等浏览器显示正常,但在如ie7/腾讯TT/搜狗浏览器(就是大概都是ie7内核的浏览器)就都显示不出来二级菜单
再帮帮忙,多谢啊! 展开
展开全部
样式或者是JS的问题，我IE8，FF都正常，
估计不是JS的问题，应该是样式的问题，你把 margin,padding都用 margin:0px 0px 0px 0px;的这种格式写，这样兼容性好点。全局标签最好初始化一下。。。
估计不是JS的问题，应该是样式的问题，你把 margin,padding都用 margin:0px 0px 0px 0px;的这种格式写，这样兼容性好点。全局标签最好初始化一下。。。
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
把
#nav li ul {
line-height: 47px;
list-style-type: none;
text-align:left;
left: -999em;
width: 1000px;
position: absolute;
float:left;
}
改成
#nav li ul {
line-height: 47px;
list-style-type: none;
text-align:left;
left: -999em;
position: absolute;
float:left;
}
就可以的 给分把
#nav li ul {
line-height: 47px;
list-style-type: none;
text-align:left;
left: -999em;
width: 1000px;
position: absolute;
float:left;
}
改成
#nav li ul {
line-height: 47px;
list-style-type: none;
text-align:left;
left: -999em;
position: absolute;
float:left;
}
就可以的 给分把
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
