IE6的菜单变形

[yaotomo]

IE6下的效果

IE7，IE8，IE9，火狐下都没有问题


HTML代码

<div>
<ul id="menu">
<li id="menu_active"><a href="index.html"><span><span>Home</span></span></a></li>
<li><a href="Features.html"><span><span>Features</span></span></a></li>
<li class="nav3"><a href="Support.html"><span><span>Support</span></span></a></li>
<li class="nav4"><a href="Downloads.html"><span><span>Downloads</span></span></a></li>
<li class="nav5"><a href="Contacts.html"><span><span>Contacts</span></span></a></li>
</ul>
</div>

CSS代码

#menu {float:right;padding:52px 0 0 0;}
#menu li {float:left;padding-left:1px;}
#menu li a {display:block;font-size:15px;color:#000;text-decoration:none;line-height:60px;background:url(../images/menu_bg.gif) top repeat-x;height:56px;overflow:hidden;cursor:pointer}
#menu li a span {display:block;background:url(../images/menu_bg_left.gif) top left no-repeat}
#menu li a span span {background:url(../images/menu_bg_right.gif) top right no-repeat;padding:0 32px;height:56px}
#menu li a:hover, #menu #menu_active a {color:#fff;background:url(../images/menu_bg_active.gif) top repeat-x}
#menu li a:hover span, #menu #menu_active a span {background:url(../images/menu_bg_left_active.gif) top left no-repeat}
#menu li a:hover span span, #menu #menu_active a span span {background:url(../images/menu_bg_right_active.gif) top right no-repeat}
#menu .nav3 a:hover, #menu .nav3#menu_active a {background:url(../images/menu_nav3_bg.gif) top repeat-x}
#menu .nav3 a:hover span, #menu .nav3#menu_active a span {background:url(../images/menu_nav3_left.gif) top left no-repeat}
#menu .nav3 a:hover span span, #menu .nav3#menu_active a span span {background:url(../images/menu_nav3_right.gif) top right no-repeat}
#menu .nav4 a:hover, #menu .nav4#menu_active a {background:url(../images/menu_nav4_bg.gif) top repeat-x}
#menu .nav4 a:hover span, #menu .nav4#menu_active a span {background:url(../images/menu_nav4_left.gif) top left no-repeat}
#menu .nav4 a:hover span span, #menu .nav4#menu_active a span span {background:url(../images/menu_nav4_right.gif) top right no-repeat}
#menu .nav5 a:hover, #menu .nav5#menu_active a {background:url(../images/menu_nav5_bg.gif) top repeat-x}
#menu .nav5 a:hover span, #menu .nav5#menu_active a span {background:url(../images/menu_nav5_left.gif) top left no-repeat}
#menu .nav5 a:hover span span, #menu .nav5#menu_active a span span {background:url(../images/menu_nav5_right.gif) top right no-repeat}

[TVBee]

神哪，你写的这是什么呀。。。。 用得着这么多样式吗。。。。。 方法1，你得给li或a指定个宽度呀，你用了太多的样式了， 这个貌似不适合你。 方法2，把A和spanblock都改成inline-block就行了 你写这么多样式你不累呀。。

[yaotomo]

谢谢指点。我从模板网站下载的，也没有细看。。

[yaotomo]

我明白他为什么写那么多样式了。下面那个绿色的条是渐变色，所以每个样式都要设置一个背景图。我把它们去掉，就很丑了。