‹‹ 上一主题 | 下一主题 ››
发新话题
打印

[求助] 很棒的CSS下拉菜单但是在IE6不好用.帮我看看怎么回事

kanghuanan [楼主]

初级会员

帖子
75 
体力
69  
威望
0  
当前
北京 东城区
离线
2 天
1# 大 中 小 发表于 2008-5-8 15:16 


 提示：您可以先修改部分代码再运行
我知道是IE6上大概是因为a:hover的问题 但是也改了一下还是不好用..大家帮我看看怎么回事
复制内容到剪贴板
代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" c />
<title>二级dropdown弹出菜单--A CROSS BROWSER DROP DOWN CASCADING VALIDATING MENU</title>
<style type="text/css">
.menu {
font-family: arial, sans-serif;
width:750px;
margin:0;
margin:50px 0;
}
.menu ul {
padding:0;
margin:0;
list-style-type: none;
}
.menu ul li {
float:left;
position:relative;
margin:0px;
padding:0px;
}
.menu ul li a, .menu ul li a:visited {
display:block;
text-align:center;
text-decoration:none;
width:104px;
height:30px;
color:#000;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#c9c9a7;
line-height:30px;
font-size:11px;
}
.menu ul li ul {
display: none;
}
.menu ul li:hover a {
color:#fff;
background:#b3ab79;
}
.menu ul li:hover ul {
display:block;
position:absolute;
top:31px;
left:0;
width:105px;
}
.menu ul li:hover ul li a {
display:block;
background:#faeec7;
color:#000;
}
.menu ul li:hover ul li a:hover {
background:#dfc184;
color:#000;
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a class="hide" href="../menu/index.html">DEMOS</a>
    <ul>
    <li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
    <li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</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 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</a></li>
    <li><a href="../menu/bodies.html" title="fun with background images">fun backgrounds</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 sized images</a></li>
    </ul>
</li>
<li><a class="hide" href="index.html">MENUS</a>
    <ul>
    <li><a href="spies.html" title="a coded list of spies">spies menu</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 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>
</li>
<li><a class="hide" href="../layouts/index.html">LAYOUTS</a>
    <ul>
    <li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li>
    <li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li>
    <li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li>
    <li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li>
    <li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li>
    </ul>
</li>
<li><a class="hide" href="../boxes/index.html">BOXES</a>
    <ul>
    <li><a href="spies.html" title="a coded list of spies">spies menu</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 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>
</li>
<li><a class="hide" href="../mozilla/index.html">MOZILLA</a>
    <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">rainbow box</a></li>
    <li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</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>
    <ul>
    <li><a href="../ie/exampleone.html" title="Example one">example one</a></li>
    <li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li>
    <li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li>
    </ul>
</li>
<li><a class="hide" href="../opacity/index.html">OPACITY</a>
    <ul>
    <li><a href="../opacity/colours.html" title="colour wheel">opaque colours</a></li>
    <li><a href="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</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>
    </ul>
</li>
</ul>
<div class="clear"> </div>
</div>
</body>
</html>
[ 本帖最后由 kanghuanan 于 2008-5-8 16:05 编辑 ]

TOP

kanghuanan [楼主]

初级会员

帖子
75 
体力
69  
威望
0  
当前
北京 东城区
离线
2 天
2# 大 中 小 发表于 2008-5-8 15:36 
怎么没有人帮助吖....自己顶起来

TOP

zhutianyi

高级会员

帖子
746 
体力
674  
威望
0  
当前
上海 长宁
3# 大 中 小 发表于 2008-5-8 15:51 
搜下别的菜单吧，论坛里有很多。

TOP

kanghuanan [楼主]

初级会员

帖子
75 
体力
69  
威望
0  
当前
北京 东城区
离线
2 天
4# 大 中 小 发表于 2008-5-8 15:59 
晕....谢谢楼上的建议..

不过我就想把这个菜单在IE6出现a:hover的BUG解决掉

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!
zhutianyi

高级会员

帖子
746 
体力
674  
威望
0  
当前
上海 长宁
5# 大 中 小 发表于 2008-5-8 16:26 
引用:
原帖由 kanghuanan 于 2008-5-8 15:59 发表
晕....谢谢楼上的建议..

不过我就想把这个菜单在IE6出现a:hover的BUG解决掉
用这个可以解决ie的bug http://bbs.blueidea.com/thread-2852049-1-1.html

TOP

kanghuanan [楼主]

初级会员

帖子
75 
体力
69  
威望
0  
当前
北京 东城区
离线
2 天
6# 大 中 小 发表于 2008-5-8 16:32 
感谢...楼上真是辛苦了!~

TOP

jming523

新手上路

帖子
7 
体力
16  
威望
0  
当前
山东 青岛
离线
55 天
7# 大 中 小 发表于 2008-5-9 00:15 
好像没有发现问题？？

TOP

jkui120

诗意花园

初级会员

帖子
54 
体力
112  
威望
0  
离线
4 天
8# 大 中 小 发表于 2008-5-9 09:40 
似懂非懂,只知道能实现,但不知道为什么,点解?

TOP

kanghuanan [楼主]

初级会员

帖子
75 
体力
69  
威望
0  
当前
北京 东城区
离线
2 天
9# 大 中 小 发表于 2008-5-9 09:43 
引用:
原帖由 jming523 于 2008-5-9 00:15 发表
好像没有发现问题？？
晕..在IE7上看效果和IE6上是不一样的...难道你那IE6也可以弹出下拉菜单的吗

TOP

jkui120

诗意花园

初级会员

帖子
54 
体力
112  
威望
0  
离线
4 天
10# 大 中 小 发表于 2008-5-9 09:44 
IE6下确实弹不出

TOP

ivanling

Eval

中级会员

帖子
104 
体力
219  
威望
1  
当前
广东 深圳
离线
2 天

专长 前端制作,JS,策划
11# 大 中 小 发表于 2008-5-11 23:59 
IE6不支持伪类

TOP

ycsy520

初级会员

帖子
98 
体力
199  
威望
0  
当前
广东 深圳
离线
48 天
12# 大 中 小 发表于 2008-5-12 10:33 
ie不能弹出的原因我想大家都知道。
这个菜单本来在ie下是可以的，但是这里的代码却掉了hack，比如：
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
等等。
在代码里面相应的位置加上这些相应的代码就可以在ie里面运行。
不写拉倒~

TOP

ccddmm

中级会员

帖子
114 
体力
241  
威望
0  
当前
北京 朝阳区
离线
37 天
13# 大 中 小 发表于 2008-5-12 11:33 
网上下来的。咋回事，不知道

 提示：您可以先修改部分代码再运行

TOP

thelucky

初级会员

帖子
141 
体力
127  
威望
0  
当前
广东 深圳
离线
2 天

专长 前端制作
14# 大 中 小 发表于 2008-5-12 11:41 
这个是用了li:hover的伪类
IE6下不支持除了a外的伪类
可以加载个csshover.htc是IE6也支持其他元素的:hover
GOOGLE搜索下，这个文件很多
itroam.com

TOP

‹‹ 上一主题 | 下一主题 ››
发新话题