请教这样的CSS该怎么写

悬赏园豆：50 [已解决问题] 解决于 2008-10-23 15:01

下面是一段HTML代码，请帮我写一段CSS，实现一个下拉菜单，要有良好的兼容性，尽量不要修改下面的HTML代码。

刚才我自已写了，但是不兼容IE。没办法，来这里寻找高人。

网站开发 HTML/CSS基础

问题补充： 意思就是，正常情况下只显示“河南”两个字，当鼠标放上去就把标签ul的内容显示出来。下面是我写的css，但是不兼容IE .address ul { display:none; padding: 0; margin: 0; list-style-type: none; } .address:hover ul { display:block; width:80px; background:#6688CC; } 我不想用javascript实现

luotong | 初学一级 | 园豆：4
提问于：2008-10-22 14:25

< >

最佳答案

不用JavaScript较难实现。主要是ie6对hover伪类的支持很弱。

宽我冒昧

Code
 <a href="#" class="address">河南
  <ul>
    <li>郑州</li>
    <li>洛阳</li>
    <li>开封</li>
</ul>

这种写法就是错误的。内联元素是不应该包含块状元素的。所以，如果不是特殊的要求或者需求，这段代码应该重新写。

阿一(杨正祎) | 小虾三级 |园豆：650 | 2008-10-23 09:58

其他回答(4)

首先很奇怪你a的位置，这样岂不是只有上面那个河南有连接？郑州什么的都没有连接？

给你一个javascript下拉菜单吧，支持多层菜单

这是前台

<head>
<title> #2</title>
<link rel="stylesheet" type="text/css" href="pro_dropdown_2/pro_dropdown_2.css" />
<script src="pro_dropdown_2/stuHover.js" type="text/javascript"></script>
</head>
<body>

<ul id="nav">
    <li class="top"><a href="#nogo1" class="top_link"><span>Home</span></a></li>
    <li class="top"><a href="#nogo2" id="products" class="top_link"><span class="down">Products</span></a>
        <ul class="sub">
            <li><a href="#nogo3" class="fly">Cameras</a>
                    <ul>
                        <li><a href="#nogo4">Nikon</a></li>
                        <li><a href="#nogo5">Minolta</a></li>
                        <li><a href="#nogo6">Pentax</a></li>
                    </ul>
            </li>
            <li class="mid"><a href="#nogo7" class="fly">Lenses</a>
                    <ul>
                        <li><a href="#nogo8">Wide Angle</a></li>
                        <li><a href="#nogo9">Standard</a></li>
                        <li><a href="#nogo10">Telephoto</a></li>
                        <li><a href="#nogo11" class="fly">Zoom</a>
                            <ul>
                                <li><a href="#nogo12">35mm to 125mm</a></li>
                                <li><a href="#nogo13">50mm to 250mm</a></li>
                                <li><a href="#nogo14">125mm to 500mm</a></li>
                            </ul>
                        </li>
                        <li><a href="#nogo15">Mirror</a></li>
                        <li><a href="#nogo16" class="fly">Non standard</a>
                            <ul>
                                <li><a href="#nogo17">Bayonet mount</a></li>
                                <li><a href="#nogo18">Screw mount</a></li>
                            </ul>
                        </li>
                    </ul>
            </li>
            <li><a href="#nogo19">Flash Guns</a></li>
            <li><a href="#nogo20">Tripods</a></li>
            <li><a href="#nogo21">Filters</a></li>
        </ul>
    </li>
</body>

CSS


.preload1 {background: url(three_1.gif);}
.preload2 {background: url(three_1a.gif);}

#nav {padding:0; margin:0; list-style:none; height:32px; background:#fff url(back.gif) repeat-x; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left; height:32px;}
#nav li a.top_link {display:block; float:left; height:32px; line-height:30px; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold; padding:0 3px 0 3px; cursor:pointer;}
#nav li a.top_link span {float:left; display:block; padding:0 10px 2px 7px; height:30px; }
#nav li a.top_link span.down {float:left; display:block; padding:0 10px 2px 10px; height:30px; }

#nav li:hover a.top_link {background: url(left.png) no-repeat left center;}
#nav li:hover a.top_link span {background:url(right.png) no-repeat right center;}
#nav li:hover a.top_link span.down {background:url(right.png) no-repeat right center;}

/* Default list styling */

#nav li:hover {position:relative; z-index:200;}

#nav li:hover ul.sub
{left:1px; top:38px; background: #bbd37e; padding:3px; border:1px solid #5c731e; white-space:nowrap; width:90px; height:auto; z-index:300;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:11px; height:18px; width:88px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #bbd37e;}
#nav li ul.sub li a.fly
{background:#bbd37e url(arrow.gif) 80px 6px no-repeat;}
#nav li:hover ul.sub li a:hover 
{background:#6a812c; color:#fff; border-color:#fff;}
#nav li:hover ul.sub li a.fly:hover
{background:#6a812c url(arrow_over.gif) 80px 6px no-repeat; color:#fff;}


#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:90px; top:-4px; background: #bbd37e; padding:3px; border:1px solid #5c731e; white-space:nowrap; width:90px; z-index:400; height:auto;}

#nav ul, 
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{background:#6a812c url(arrow_over.gif) 80px 6px no-repeat; color:#fff; border-color:#fff;} 

#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
{background:#bbd37e url(arrow.gif) 80px 6px no-repeat; color:#000; border-color:#bbd37e;}

javascirpt

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);

杨斐 | 园豆：230 (菜鸟二级) | 2008-10-22 14:52

有点不明白是什么意思？能否再具体描述一下

张荣华 | 园豆：2020 (老鸟四级) | 2008-10-22 14:53

可以结案。OK

Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>

 <BODY>
  <a href="#" class="address" onmouseover="javascript:document.getElementById('divHenan').style.display='block';" onmouseout="javascript:document.getElementById('divHenan').style.display='none';">河南

<div id="divHenan" style="display:none;">
<ul>
<li>郑州</li>
<li>洛阳</li>
<li>开封</li>
</ul>

       </div>
</a>

 </BODY>
</HTML>

RicoRui | 园豆：3663 (老鸟四级) | 2008-10-22 14:55

ie6 不兼容 .address:hover ul
这种写法
主要是不支持伪类:hover
那么就就只能用onmouseover事件来代替了
值用css 解决不了必须用javascript

小眼睛老鼠 | 园豆：2731 (老鸟四级) | 2008-10-22 20:44

清除回答草稿

您需要登录以后才能回答，未注册用户请先注册。

欢迎，请先 登录 或者 注册 。

请教这样的CSS该怎么写

欢迎，请先登录或者注册。