匿名用户

1级

2014-04-15 回答

首先你使用 #header .row-2 ul li:hover 这样ie6就不支持了。ie6支持的hover目前我知道的只有a标签。

要单纯用css实现下拉，在ie下是兼容不了的。我给你改成js版，喜欢就用吧。

1，style.css修改的部分：

原码：

#header .row-2 ul li ul {

display: none;

}

#header .row-2 ul li:hover ul {

display:block;

width:165px;

height:auto;

position: absolute;

}

#header .row-2 ul li:hover ul li a {

padding-top:2px;

display:block;

color:#FFF;

}

#header .row-2 ul li:hover ul li a:hover {

background:url(images/nav-tail.gif) repeat-x left top;

padding-top:2px;

color:#81bb00;

}

修改为：

#header .row-2 ul li ul {

display:none;

width:165px;

height:auto;

position: absolute;

top:161px;

}

#header .row-2 ul li ul li{float:none}

#header .row-2 ul li ul li a {

padding-top:2px;

display:block;

color:#FFF;

}

#header .row-2 ul li ul li a:hover {

background:url(images/nav-tail.gif) repeat-x left top;

padding-top:2px;

color:#81bb00;

}

2，网页的修改，在网页最后，</html>后面加上下面js就可以

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$('.row-2>ul>li').hover(

function(){

$('ul',this).css('left',$(this).offset().left);

$('ul',this).show()

},

function(){$('ul',this).hide()}

);

});

</script>

3，就这样，我这里测试支持ie及其他标准浏览器

ps.现在菜单的显示的简单是显示和隐藏，可以该成

淡入淡出：

$('ul',this).show() 改为 $('ul',this).fadeIn()

$('ul',this).hide() 改为 $('ul',this).fadeOut()

滑动：

$('ul',this).show() 改为 $('ul',this).slideDown()

$('ul',this).hide() 改为 $('ul',this).slideUp()