IE6无法显示纯CSS下拉菜单! 请高手看下CSS

[JonnySun]

弄了快两天了,实在搞不定求助网友,多谢!!!!!

不能上传图片啊!!!

BODY
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.85em;
}

#nav
{
	font-size: 14px;
	position: relative;
	margin: 0px;
	padding: 0px;
	height: 22px;
	line-height: 22px;
	list-style-type: none;
	list-style-position: outside;
	z-index: 10000;
}

#nav UL
{
	/*顶级菜单层*/
	position: relative;
	line-height: 22px;
	height: 22px;
	margin: 0px;
	padding: 0px;
	list-style-position: outside;
	list-style-type: none;
	z-index: 10000;
}

#nav A
{
	/*顶级菜单项*/
	border: solid 1px #333;
	padding-bottom: 0px;
	background-color: #333;
	padding-left: 5px;
	padding-right: 5px;
	display: block; /*color: #fff;*/
	color: #b6b6b6; /* #c2c2c2;  gray*/
	text-decoration: none;
	padding-top: 0px;
	height: 21px;
	z-index: 10000;
}

#nav A:hover
{
	/*顶级菜单焦点色调*/
	background-color: #515151;
	color: #dadada;
}

#nav LI
{
	position: relative;
	float: left;
	height: 21px;
	text-align: center; /*width: 9em; /*顶级菜单宽度*/
	z-index: 10000;
}
/*!!!!!!!!!!!!!!!!!!!!调整!!!!*/
#nav LI UL
{
	position: relative;
	float: left;
	padding-top: 0px;
	margin-top: 0px;
	z-index: 10000;
}

#nav UL
{
	position: absolute;
	width: 10em; /*下拉菜单宽度*/
	display: none; /*top: 1.5em;*/
	top: 0px;
	z-index: 10000;
}

#nav UL LI UL
{
	top: -24px;
	z-index: 10000;
}

#nav UL LI UL LI UL
{
	top: -24px;
	z-index: 10000;
}

#nav UL LI
{
	position: relative;
	float: left;
	height: 21px;
	text-align: left;
	z-index: 10000;
}

#nav LI UL A
{
	width: 10em;
	float: left; /*height: auto;*/
	height: 22px;
	display: block;
}

#nav UL UL
{
	top: auto;
	z-index: 10000;
}

#nav LI UL UL
{
	margin: 0px 0px 0px 10px;
	left: 10em;
	z-index: 10000;
}

/*藏匿菜单*/

#nav LI:hover UL
{
	display: none;
	visibility: hidden;
}

#nav LI:hover UL LI
{
	display: none;
	visibility: hidden;
}

#nav LI:hover UL LI UL
{
	display: none;
	visibility: hidden;
}

#nav LI:hover UL LI UL LI
{
	display: none;
	visibility: hidden;
}

#nav LI:hover UL LI UL LI UL
{
	display: none;
	visibility: hidden;
}

#nav LI:hover UL UL
{
	display: none;
	visibility: hidden;
}
#nav LI:hover UL UL UL
{
	display: none;
	visibility: hidden;
}

#nav LI:hover UL UL UL UL
{
	display: none;
	visibility: hidden;
}

/*显示菜单*/
#nav LI:hover UL
{
	display: block;
	visibility: visible;
}

#nav LI:hover UL LI
{
	display: block;
	visibility: visible;
}

#nav LI UL LI:hover UL
{
	display: block;
	visibility: visible;
}

#nav LI UL LI:hover UL LI
{
	display: block;
	visibility: visible;
}

#nav LI UL LI UL LI:hover UL
{
	display: block;
	visibility: visible;
}

#nav LI UL LI UL LI:hover UL LI
{
	display: block;
	visibility: visible;
}

<ul id="nav">
    <li style="width: 125px;"><a href="#">客房及別墅套间»</a>
        <ul>
            <li><a href="#">• 主楼 »</a>
                <ul>
                    <li><a href="item.aspx?item_id=101">• 主楼标准房</a></li>
                    <li><a href="item.aspx?item_id=102">• 主楼套房</a></li>
                    <li><a href="item.aspx?item_id=103">• 主楼大床房</a></li>
                </ul>
            </li>
            <li><a href="#">• 副主楼 »</a>
                <ul>
                    <li><a href="item.aspx?item_id=104">• 副楼标准房</a></li>
                    <li><a href="item.aspx?item_id=105">• 副楼大床房</a></li>
                    <li><a href="item.aspx?item_id=106">• 副楼三人房</a></li>
                </ul>
            </li>
            <li><a href="#">• 別墅 »</a>
                <ul>
                    <li><a href="item.aspx?item_id=107">• 別墅标准房</a></li>
                    <li><a href="item.aspx?item_id=108">• 別墅套房</a></li>
                    <li><a href="item.aspx?item_id=109">• 別墅大床房</a></li>
                </ul>
            </li>
            <li><a href="#">• 小木屋 »</a>
                <ul>
                    <li><a href="item.aspx?item_id=110">• 两室一厅</a></li>
                    <li><a href="item.aspx?item_id=111">• 三室一厅</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li style="width: 80px;"><a href="#">餐膳 »</a>
        <ul>
            <li><a href="item.aspx?item_id=162">• 中国餐饮及菜肴</a></li>
            <li><a href="item.aspx?item_id=161">• 餐饮系列</a></li>
            <li><a href="item.aspx?item_id=160">• 菜肴系列</a></li>
            <li><a href="item.aspx?item_id=112">• 餐厅 - 荷花厅</a></li>
            <li><a href="item.aspx?item_id=113">• 餐厅 - 海棠厅</a></li>
        </ul>
    </li>
    <li style="width: 80px;"><a href="#">戶外项目»</a>
        <ul>
            <li><a href="item.aspx?item_id=130">• 网球场</a></li>
            <li><a href="item.aspx?item_id=116">• 羽毛球</a></li>
            <li><a href="item.aspx?item_id=133">• 钓鱼场</a></li>
            <li><a href="item.aspx?item_id=115">• 高尔夫</a></li>
            <li><a href="item.aspx?item_id=136">• 骑马场</a></li>
        </ul>
    </li>
    <li style="width: 80px;"><a href="#">娱乐»</a>
        <ul>
            <li><a href="item.aspx?item_id=117">• 室内项目</a></li>
            <li><a href="item.aspx?item_id=118">• 室外项目</a></li>
            <li><a href="item.aspx?item_id=119">• 游泳池</a></li>
            <li><a href="item.aspx?item_id=120">• 卡丁车</a></li>
            <li><a href="karting.htm">• 卡丁车介绍</a></li>
        </ul>
    </li>
    <li style="width: 80px;"><a href="#">会务场所»</a>
        <ul>
            <li><a href="item.aspx?item_id=100">• 场所场地介绍</a></li>
            <li><a href="item.aspx?item_id=121">• 小型会议室(一)</a></li>
            <li><a href="item.aspx?item_id=122">• 小型会议室(二)</a></li>
            <li><a href="item.aspx?item_id=123">• 多功能会议厅</a></li>
            <li><a href="item.aspx?item_id=124">• 杏花厅</a></li>
            <li><a href="item.aspx?item_id=125">• 会议中心</a></li>
            <li><a href="item.aspx?item_id=126">• 白玉兰宴会厅</a></li>
        </ul>
    </li>
    <li style="width: 100px;"><a href="#">活动与优惠»</a>
        <ul>
            <li><a href="item.aspx?item_id=166">• 最新优惠活动情况</a></li>
            <li><a href="item.aspx?item_id=288">• 特价休闲之旅一日游</a></li>
            <li><a href="item.aspx?item_id=588">• 特价休闲之旅二日游</a></li>
        </ul>
    </li>
    <li style="width: 100px;"><a href="#">关于我们»</a>
        <ul>
            <li><a href="about.htm">• 关于黄金海滨度假村</a></li>
            <li><a href="contact.htm">• 联系我们</a></li>
            <li><a href="send_message.aspx">• 给我们留言</a></li>
            <li><a href="outside.htm">• 周边景点介绍</a></li>
        </ul>
    </li>
    <li style="width: 80px;"><a href="#">招聘信息»</a>
        <ul>
            <li><a href="item.aspx?item_id=165">• 最新招聘</a></li>
        </ul>
    </li>
</ul>

[mingl11]

用你的代码，写了一下，用js实现的

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
    BODY
{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 0.85em;
}

#nav
{
    font-size: 14px;
    position: relative;
    margin: 0px;
    padding: 0px;
    height: 22px;
    line-height: 22px;
    list-style-type: none;
    list-style-position: outside;
    z-index: 10000;
    background:#333333;
}

#nav UL
{
    /*顶级菜单层*/
    position: relative;
    line-height: 22px;
    height: 22px;
    margin: 0px;
    padding: 0px;
    list-style-position: outside;
    list-style-type: none;
    z-index: 10000;
}

#nav A
{
    /*顶级菜单项*/
    border: solid 1px #333;
    padding-bottom: 0px;
    background-color: #333;
    padding-left: 5px;
    padding-right: 5px;
    display: block; /*color: #fff;*/
    color: #b6b6b6; /* #c2c2c2;  gray*/
    text-decoration: none;
    padding-top: 0px;
    height: 21px;
    z-index: 10000;
}

#nav A:hover
{
    /*顶级菜单焦点色调*/
    background-color: #515151;
    color: #dadada;
}

#nav LI
{
    position: relative;
    float: left;
    height: 21px;
    text-align: center; /*width: 9em; /*顶级菜单宽度*/
    z-index: 10000;
}
/*!!!!!!!!!!!!!!!!!!!!调整!!!!*/
#nav LI UL
{
    position: relative;
    float: left;
    padding-top: 0px;
    margin-top: 0px;
    z-index: 10000;
}

#nav UL
{
    position: absolute;
    width: 10em; /*下拉菜单宽度*/
    display: none; /*top: 1.5em;*/
    top: 0px;
    z-index: 10000;
}

#nav UL LI UL
{
    top: -24px;
    z-index: 10000;
}

#nav UL LI UL LI UL
{
    top: -24px;
    z-index: 10000;
}

#nav UL LI
{
    position: relative;
    float: left;
    height: 21px;
    text-align: left;
    z-index: 10000;
    background:#333333;
}

#nav LI UL A
{
    width: 10em;
    float: left; /*height: auto;*/
    height: 22px;
    display: block;
}

#nav UL UL
{
    top: auto;
    z-index: 10000;
}

#nav LI UL UL
{
    margin: 0px 0px 0px 10px;
    left: 10em;
    z-index: 10000;
}

    </style>

    <script language="javascript" type="text/javascript">
    window.onload=function(){
    var mainNav=document.getElementById("nav");
    var mainLi=mainNav.childNodes;
    for(i=0;i<mainLi.length;i++)
    {
    mainLi[i].onmouseover=function(){
    for(i=0;i<this.childNodes.length;i++){
    if(this.childNodes[i]!=null&&this.childNodes[i].tagName=="UL")
    {this.childNodes[i].style.display="block";
    var secondList=this.childNodes[i];

    
    //第二层菜单
    var secondListLi=secondList.childNodes;
    for(m=0;m<secondListLi.length;m++)
    {
    secondListLi[m].onmouseover=function(){
for(n=0;n<this.childNodes.length;n++)
{
if(this.childNodes[n].tagName=="UL")
{this.childNodes[n].style.display="block";}
}

    }
    secondListLi[m].onmouseout=function(){
for(n=0;n<this.childNodes.length;n++)
{
if(this.childNodes[n].tagName=="UL")
{
this.childNodes[n].style.display="none";
}
}

    }
    }
    
    }
    }
    }
    mainLi[i].onmouseout=function(){
    for(i=0;i<this.childNodes.length;i++){
    if(this.childNodes[i]!=null&&this.childNodes[i].tagName=="UL")
    {this.childNodes[i].style.display="none";}
    }
    }
    }
    }
    </script>

</head>
<body>
    <ul id="nav">
        <li style="width: 125px;"><a href="#">客房及別墅套间»</a>
            <ul>
                <li><a href="#">• 主楼 »</a>
                    <ul>
                        <li><a href="item.aspx?item_id=101">• 主楼标准房</a></li>
                        <li><a href="item.aspx?item_id=102">• 主楼套房</a></li>
                        <li><a href="item.aspx?item_id=103">• 主楼大床房</a></li>
                    </ul>
                </li>
                <li><a href="#">• 副主楼 »</a>
                    <ul>
                        <li><a href="item.aspx?item_id=104">• 副楼标准房</a></li>
                        <li><a href="item.aspx?item_id=105">• 副楼大床房</a></li>
                        <li><a href="item.aspx?item_id=106">• 副楼三人房</a></li>
                    </ul>
                </li>
                <li><a href="#">• 別墅 »</a>
                    <ul>
                        <li><a href="item.aspx?item_id=107">• 別墅标准房</a></li>
                        <li><a href="item.aspx?item_id=108">• 別墅套房</a></li>
                        <li><a href="item.aspx?item_id=109">• 別墅大床房</a></li>
                    </ul>
                </li>
                <li><a href="#">• 小木屋 »</a>
                    <ul>
                        <li><a href="item.aspx?item_id=110">• 两室一厅</a></li>
                        <li><a href="item.aspx?item_id=111">• 三室一厅</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li style="width: 80px;"><a href="#">餐膳 »</a>
            <ul>
                <li><a href="item.aspx?item_id=162">• 中国餐饮及菜肴</a></li>
                <li><a href="item.aspx?item_id=161">• 餐饮系列</a></li>
                <li><a href="item.aspx?item_id=160">• 菜肴系列</a></li>
                <li><a href="item.aspx?item_id=112">• 餐厅 - 荷花厅</a></li>
                <li><a href="item.aspx?item_id=113">• 餐厅 - 海棠厅</a></li>
            </ul>
        </li>
        <li style="width: 80px;"><a href="#">戶外项目»</a>
            <ul>
                <li><a href="item.aspx?item_id=130">• 网球场</a></li>
                <li><a href="item.aspx?item_id=116">• 羽毛球</a></li>
                <li><a href="item.aspx?item_id=133">• 钓鱼场</a></li>
                <li><a href="item.aspx?item_id=115">• 高尔夫</a></li>
                <li><a href="item.aspx?item_id=136">• 骑马场</a></li>
            </ul>
        </li>
        <li style="width: 80px;"><a href="#">娱乐»</a>
            <ul>
                <li><a href="item.aspx?item_id=117">• 室内项目</a></li>
                <li><a href="item.aspx?item_id=118">• 室外项目</a></li>
                <li><a href="item.aspx?item_id=119">• 游泳池</a></li>
                <li><a href="item.aspx?item_id=120">• 卡丁车</a></li>
                <li><a href="karting.htm">• 卡丁车介绍</a></li>
            </ul>
        </li>
        <li style="width: 80px;"><a href="#">会务场所»</a>
            <ul>
                <li><a href="item.aspx?item_id=100">• 场所场地介绍</a></li>
                <li><a href="item.aspx?item_id=121">• 小型会议室(一)</a></li>
                <li><a href="item.aspx?item_id=122">• 小型会议室(二)</a></li>
                <li><a href="item.aspx?item_id=123">• 多功能会议厅</a></li>
                <li><a href="item.aspx?item_id=124">• 杏花厅</a></li>
                <li><a href="item.aspx?item_id=125">• 会议中心</a></li>
                <li><a href="item.aspx?item_id=126">• 白玉兰宴会厅</a></li>
            </ul>
        </li>
        <li style="width: 100px;"><a href="#">活动与优惠»</a>
            <ul>
                <li><a href="item.aspx?item_id=166">• 最新优惠活动情况</a></li>
                <li><a href="item.aspx?item_id=288">• 特价休闲之旅一日游</a></li>
                <li><a href="item.aspx?item_id=588">• 特价休闲之旅二日游</a></li>
            </ul>
        </li>
        <li style="width: 100px;"><a href="#">关于我们»</a>
            <ul>
                <li><a href="about.htm">• 关于黄金海滨度假村</a></li>
                <li><a href="contact.htm">• 联系我们</a></li>
                <li><a href="send_message.aspx">• 给我们留言</a></li>
                <li><a href="outside.htm">• 周边景点介绍</a></li>
            </ul>
        </li>
        <li style="width: 80px;"><a href="#">招聘信息»</a>
            <ul>
                <li><a href="item.aspx?item_id=165">• 最新招聘</a></li>
            </ul>
        </li>
    </ul>
</body>
</html>

[JonnySun]

[子夜__]

这种情况应该是IE6没有加载上CSS吧？

看看你的CSS编码是不是UTF-8

直接用记事本打开CSS，然后另存为，选择utf-8编码

这样在试下

[JonnySun]

[Quote=引用 2 楼 wxr0323 的回复:]

这种情况应该是IE6没有加载上CSS吧？

看看你的CSS编码是不是UTF-8

直接用记事本打开CSS，然后另存为，选择utf-8编码

这样在试下
[/Quote]

谢谢! 你的答案快接近了!!!! 现在可以显示顶级菜单, 但是看不到第一级下拉菜单!!! 好像是被Flash挡住了??

[JonnySun]

[JonnySun]

可以确认不是遮挡,而是压根没显示一级菜单!

[子夜__]

[Quote=引用 3 楼 jonnysun 的回复:]

引用 2 楼 wxr0323 的回复:

这种情况应该是IE6没有加载上CSS吧？

看看你的CSS编码是不是UTF-8

直接用记事本打开CSS，然后另存为，选择utf-8编码

这样在试下


谢谢! 你的答案快接近了!!!! 现在可以显示顶级菜单, 但是看不到第一级下拉菜单!!! 好像是被Flash挡住了??
[/Quote]

这个。。。。呵呵




有两种方法，一种就是设置flash为透明：
但是如果你在DW中插入动画，再加
<param name="wmode" value="transparent">
是不生效的。要把整个的flash插件代码换成如下：
<object type="application/x-shockwave-flash" data="http://www.konnech.cn/2/images/banner.swf" width="560" height="210">
<param name="movie" value="http://www.konnech.cn/2/images/banner.swf" />
<param name="wmode" value="transparent" />
</object>
对比一下，和DW自动生成的代码是有区别的，测试过，IE　FF　均可以。

第二种方法：设置flash置底，加个代码：<param name="wmode" value="opaque" />
但是只加这个代码，IE可行，在FF下，失效。要想在FF下起作用，还要用在<object　里加个　wmode="opaque" ，实例代码如下：
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="560" height="210">
<param name="movie" value="http://www.konnech.cn/2/images/banner.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque">
<embed src="http://www.konnech.cn/2/images/banner.swf" wmode="opaque" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="560" height="210"></embed>
</object>

[wuyq11]

检查CSS兼容性，编码

[yangyalin8425]

ie6和别的ie7,ie8了标准有些不同你看下css标准吧

[迷茫的凡人]

li a:hover
ie6不认 li:hover 的。
定义a跟li一模一样。

[JonnySun]

to wxr0323: 你介绍的两种方法都试了,已确定绝对不是遮挡问题, 我把菜单单独放到一个htm内也不能显示一级菜单.

to wuyq11:我也这么认为,但我不懂css. 要花多少时间来研究css?, 黄花菜都凉了! 下周一要交货!

郁闷中..... 求助!

再加奖励100分, 另发帖奉上!

[子夜__]

[Quote=引用 10 楼 jonnysun 的回复:]

to wxr0323: 你介绍的两种方法都试了,已确定绝对不是遮挡问题, 我把菜单单独放到一个htm内也不能显示一级菜单.

to wuyq11:我也这么认为,但我不懂css. 要花多少时间来研究css?, 黄花菜都凉了! 下周一要交货!

郁闷中..... 求助!

再加奖励100分, 另发帖奉上!
[/Quote]

那还是CSS的问题喽。
现在环境没有IE6 悲剧。。。。
晚上回去的时候看看。

[JonnySun]

[Quote=引用 9 楼 jls6810 的回复:]

li a:hover
ie6不认 li:hover 的。
定义a跟li一模一样。
[/Quote]

改为下面的语法不起作用! IE7,FIREFOX内也蛋痛了! 两个蛋痛了!

/*显示菜单*/
#nav li a:hover UL
{
	display: block;
	visibility: visible;
}

[JonnySun]

[Quote=引用 11 楼 wxr0323 的回复:]

引用 10 楼 jonnysun 的回复:

to wxr0323: 你介绍的两种方法都试了,已确定绝对不是遮挡问题, 我把菜单单独放到一个htm内也不能显示一级菜单.

to wuyq11:我也这么认为,但我不懂css. 要花多少时间来研究css?, 黄花菜都凉了! 下周一要交货!

郁闷中..... 求助!

再加奖励100分, 另发帖奉上!


那还是CSS的问题喽。……
[/Quote]

我用VM 2000+IE6调试的

[迷茫的凡人]

    <script language="javascript">
        stuHover = function() {
            var cssRule;
            var newSelector;
            for (var i = 0; i < document.styleSheets.length; i++)
                for (var x = 0; x < document.styleSheets[i].rules.length; x++) {
                cssRule = document.styleSheets[i].rules[x];
                if (cssRule.selectorText.indexOf("LI:hover") != -1) {
                    newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");
                    document.styleSheets[i].addRule(newSelector, cssRule.style.cssText);
                }
            }
            var getElm = document.getElementById("nav").getElementsByTagName("LI");
            for (var i = 0; i < getElm.length; i++) {
                getElm[i].onmouseover = function() {
                    this.className += " iehover";
                }
                getElm[i].onmouseout = function() {
                    this.className = this.className.replace(new RegExp(" iehover\\b"), "");
                }
            }
        }
        if (window.attachEvent) window.attachEvent("onload", stuHover);
</script>

把这个js代码放在 <title></title>后面，css样式的前面就行了，已测试IE6下有下级菜单

[JonnySun]

to: jls6810 你的答案也很接近, 能显示一级菜单了(有一点有正常),但是显示二级菜单时全乱了! 请看图:

[JonnySun]

怎么会显示一个大白框框出来??? 是什么东东哦!!!!

[mingl11]

LI:hover 好像IE6只支持A的伪类，其他元素的不支持，只能用js实现吧

[JonnySun]

[Quote=引用 11 楼 wxr0323 的回复:]

引用 10 楼 jonnysun 的回复:

to wxr0323: 你介绍的两种方法都试了,已确定绝对不是遮挡问题, 我把菜单单独放到一个htm内也不能显示一级菜单.

to wuyq11:我也这么认为,但我不懂css. 要花多少时间来研究css?, 黄花菜都凉了! 下周一要交货!

郁闷中..... 求助!

再加奖励100分, 另发帖奉上!


那还是CSS的问题喽。……
[/Quote]

辛苦你了,等待答案...

[JonnySun]

综合上面提供的资料, 整理JS及CSS后已经解决! 谢谢你们!