[求助] 向css高手求助关于二级菜单的问题
http://lanwatcher.cn/index.aspx
其顶部的菜单 在ie6和ie7显示正常,但是在ff下就不会显示二级菜单。
希望大家帮帮忙啊,绝非广告。
------解决方案--------------------网页无法显示
贴代码出来吧。
------解决方案--------------------是你的javascript出现问题了
if (document.all&&document.getElementById)
这个判断语句是判断浏览器的了
document.all 只有IE才认得的了,FF,opera标准兼容浏览器没有这个 所以得到的是一个false的值
你可以修改成这样的if (document.all || document.getElementById) 试试看了
===========================================
<script language= "javascript ">
// JavaScript Document
startList = function() {
if (document.all&&document.getElementById)
{
navRoot = document.getElementById( "nav ");
for (i=0; i <navRoot.childNodes.length; i++)
{
node = navRoot.childNodes[i];
if (node.nodeName== "LI ")
{
node.onmouseover=function()
{
this.className+= " over ";
}///onmouseover结束
node.onmouseout=function()
{
this.className=this.className.replace( " over ", " ");
} ///onmouseout结束
} /// if (node.nodeName== "LI ") 结束
} /// for 结束
} ///if (document.all&&document.getElementById) 结束,这里有问题
}///startList结束
window.onload=startList;
///页面加载时调用startList函数
startList();
</script>
------解决方案-------------------- 纯CSS制作下拉导航菜单
<style type= "text/css ">
.menu {
font-family: verdana, sans-serif;
width:750px;
position:relative;
font-size:0.85em;
padding-bottom:250px;
}
.menu ul {
padding:0;
margin:0;
list-style-type: none;
}
.menu ul li {
float:left;
position:relative;
}
.menu ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
color:#000;
width:139px;
height:3em;
color:#000;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#dfc184;
padding-left:10px;
line-height:3em;
}
* html .menu ul li a, .menu ul li a:visited {
width:149px;
w\idth:139px;
}
.menu ul li ul {
display: none;
}
table {
margin:-1px;
border-collapse:collapse;
font-size:1em;
}
/* specific to non IE browsers */
.menu ul li:hover a {
color:#fff;
background:#bd8d5e;
}
.menu ul li:hover ul {
display:block;
position:absolute;
top:3em;
margin-top:1px;
left:0;
width:150px;
}
.menu ul li:hover ul li ul {
display: none;
}
.menu ul li:hover ul li a {
display:block;
background:#faeec7;
color:#000;
height:auto;
line-height:1.2em;
padding:5px 10px;
width:129px
}
.menu ul li:hover ul li a.drop {
background:#c9c9a7 url(../../graphics/drop.gif) bottom right no-repeat;
}
.menu ul li:hover ul li a:hover {
background:#c9c9a7;
color:#000;
}
.menu ul li:hover ul li:hover ul {
display:block;
position:absolute;
left:150px;
top:0;
width:150px;
}
.menu ul li:hover ul li:hover ul.left {
left:-150px;
}
</style>
<!--[if lte IE 6]>
<style type= "text/css ">
.menu ul li a:hover {
color:#fff;
background:#bd8d5e;
}
.menu ul li a:hover ul {
display:block;
position:absolute;
top:3em;
left:0;
background:#fff;