首页 新闻 搜索 专区 学院

请教这样的CSS该怎么写

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

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

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

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

问题补充: 意思就是,正常情况下只显示“河南”两个字,当鼠标放上去就把标签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的主页 luotong | 初学一级 | 园豆:5
提问于:2008-10-22 14:25
< >
分享
最佳答案
1

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

宽我冒昧

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

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

阿一(杨正祎) | 小虾三级 |园豆:650 | 2008-10-23 09:58
其他回答(4)
0

首先很奇怪你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
0

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

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

可以结案。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
0

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

小眼睛老鼠 | 园豆:2774 (老鸟四级) | 2008-10-22 20:44
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册