[] 向css高手关于二级菜单的有关问题

[求助] 向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;

margin-top:0;
marg\in-top:1px;
}
.menu ul li a:hover ul li a {
display:block;
background:#dbe4ab;
color:#000;
height:auto;
line-height:1.5em;
padding:5px 10px;
width:150px;
w\idth:129px;
}
.menu ul li a:hover ul li a.drop {
background:#c9c9a7 url(../../graphics/drop.gif) bottom right no-repeat;
}
.menu ul li a:hover ul li a ul {
visibility:hidden;
position:absolute;
height:0;
width:0;
}
.menu ul li a:hover ul li a:hover {
background:#c9c9a7; color:#000;
}
.menu ul li a:hover ul li a:hover ul {
visibility:visible;
position:absolute;
top:0;
color:#000;
left:150px;
}
.menu ul li a:hover ul li a:hover ul.left {
left:-150px;
}

</style>
<![endif]-->
<div class= "menu ">

<ul>
<li> <a class= "drop " href= "../menu/index.html "> DEMOS

</a>


<table> <tr> <td>

<ul>
<li> <a href= "../menu/zero_dollars.html " title= "The zero dollar ads page "> zero dollars advertising

page </a> </li>
<li> <a href= "../menu/embed.html " title= "Wrapping text around images "> wrapping text around

images </a> </li>
<li> <a href= "../menu/form.html " title= "Styling forms "> styled form </a> </li>
<li> <a href= "../menu/nodots.html " title= "Removing active/focus borders "> active focus </a> </li>

<li> <a class= "drop " href= "../menu/hover_click.html " title= "Hover/click with no active/focus

borders "> hover/click with no borders

</a>


<table> <tr> <td>
<ul>
<li> <a href= "../menu/form.html " title= "Styling forms "> styled form </a> </li>
<li> <a href= "../menu/nodots.html " title= "Removing active/focus borders "> removing

active/focus borders </a> </li>
<li> <a href= "../menu/hover_click.html " title= "Hover/click with no active/focus

borders "> hover/click </a> </li>
</ul>
</td> </tr> </table>



</li>

<li class= "upone "> <a href= "../menu/shadow_boxing.html " title= "Multi-position drop shadow "> shadow

boxing </a> </li>
<li> <a href= "../menu/old_master.html " title= "Image Map for detailed information "> image map for

detailed information </a> </li>
<li> <a href= "../menu/bodies.html " title= "fun with background images "> fun with background

images </a> </li>
<li> <a href= "../menu/fade_scroll.html " title= "fade-out scrolling "> fade scrolling </a> </li>
<li> <a href= "../menu/em_images.html " title= "em size images compared "> em image sizes

compared </a> </li>

</ul>

</td> </tr> </table>



</li>

<li> <a href= "../boxes/index.html "> BOXES

</a>


<table> <tr> <td>

<ul>
<li> <a href= "spies.html " title= "a coded list of spies "> a coded list of spies </a> </li>
<li> <a href= "vertical.html " title= "a horizontal vertical menu "> vertical menu </a> </li>
<li> <a href= "expand.html " title= "an enlarging unordered list "> enlarging unordered list </a> </li>
<li> <a href= "enlarge.html " title= "an unordered list with link images "> link images </a> </li>
<li> <a href= "cross.html " title= "non-rectangular links "> non-rectangular </a> </li>
<li> <a href= "jigsaw.html " title= "jigsaw links "> jigsaw links </a> </li>
<li> <a href= "circles.html " title= "circular links "> circular links </a> </li>
</ul>

</td> </tr> </table>



</li>

<li> <a href= "../mozilla/index.html "> MOZILLA

</a>


<table> <tr> <td>

<ul>
<li> <a href= "../mozilla/dropdown.html " title= "A drop down menu "> drop down menu </a> </li>
<li> <a href= "../mozilla/cascade.html " title= "A cascading menu "> cascading menu </a> </li>
<li> <a href= "../mozilla/content.html " title= "Using content: "> content: </a> </li>
<li> <a href= "../mozilla/moxbox.html " title= ":hover applied to a div "> mozzie box </a> </li>
<li> <a href= "../mozilla/rainbow.html " title= "I can build a rainbow "> I can build a rainbow with

transparent borders </a> </li>
<li> <a href= "../mozilla/snooker.html " title= "Snooker cue "> a snooker cue using border art </a> </li>
<li> <a href= "../mozilla/target.html " title= "Target Practise "> target practise </a> </li>
<li> <a href= "../mozilla/splittext.html " title= "Two tone headings "> two tone headings </a> </li>
<li> <a href= "../mozilla/shadow_text.html " title= "Shadow text "> shadow text </a> </li>
</ul>

</td> </tr> </table>



</li>

<li> <a href= "../ie/index.html "> EXPLORER

</a>


<table> <tr> <td>

<ul>
<li> <a href= "../ie/exampleone.html " title= "Example one "> the first example for Internet

Explorer </a> </li>

<li> <a href= "../ie/weft.html " title= "Weft fonts "> weft fonts </a> </li>
<li> <a href= "../ie/exampletwo.html " title= "Vertical align "> vertically aligning text </a> </li>
</ul>

</td> </tr> </table>



</li>

<li> <a href= "../opacity/index.html "> OPACITY

</a>


<table> <tr> <td>

<ul>
<li> <a href= "../opacity/colours.html " title= "colour wheel "> a colour wheel using opaque

colours </a> </li>
<li> <a href= "../opacity/picturemenu.html " title= "a menu using opacity "> a menu using

opacity </a> </li>
<li> <a href= "../opacity/png.html " title= "partial opacity "> partial opacity </a> </li>
<li> <a href= "../opacity/png2.html " title= "partial opacity II "> partial opacity II </a> </li>

<li> <a class= "drop " href= "../menu/hover_click.html " title= "Hover/click with no active/focus

borders "> HOVER/CLICK

</a>


<table> <tr> <td>

<ul class= "left ">
<li> <a href= "../menu/form.html " title= "Styling forms "> styled form </a> </li>
<li> <a href= "../menu/nodots.html " title= "Removing active/focus borders "> removing

active/focus borders </a> </li>
<li> <a href= "../menu/hover_click.html " title= "Hover/click with no active/focus

borders "> hover/click </a> </li>
</ul>

</td> </tr> </table>



</li>
</ul>

</td> </tr> </table>



</li>
</ul>

</div>
[解决办法]
childNodes在FF下面不成立
你可以这样该
用js+css
css中设置让在FF下可以运行的
js设置在IE上可以运行的
我给你做了个简单的例子
<TITLE> New Document </TITLE>
<style>
li #uls {display:none;}
li:hover #uls{display:block;}
</style>

</HEAD>

<BODY>
<SCRIPT LANGUAGE= "JavaScript ">

</SCRIPT>
<li id= "aa "> <a href= "# "> News </a>
<ul id= "uls ">
<li> <a href= "# "> Press Releases </a> </li>

<li> <a href= "# "> News Articles </a> </li>
</ul>
</li>

</BODY>
</HTML>
不过也不一定思路正确但是我再FF和IE下都可以运行出来

[] 向css高手关于二级菜单的有关问题

热点推荐