当前位置: 代码迷 >> HTML/CSS >> 菜单兼容性有关问题,ie6 不识别.menu ul li:hover ul li a:hover吗
  详细解决方案

菜单兼容性有关问题,ie6 不识别.menu ul li:hover ul li a:hover吗

热度:920   发布时间:2012-03-26 15:46:56.0
菜单兼容性问题,ie6 不识别.menu ul li:hover ul li a:hover吗?请指教
ie6 不识别.menu ul li:hover ul li a:hover吗?为什么显示不出来二级菜单

HTML code

<!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" content="text/html; charset=utf-8" />
<title>nav-test</title>
<style type="text/css">
#sbdmenu{}
#sbdmenu .menu {
font-family: arial, sans-serif;
width:700px;
margin:0;
margin:0;
}

#sbdmenu .menu ul {
padding:0;
margin:0;
list-style-type: none;
}

#sbdmenu .menu ul li {
float:left;
position:relative;

}

#sbdmenu .menu ul li a, #sbdmenu .menu ul li a:visited {
display:block;
text-align:center;
text-decoration:none;
width:70px;
height:70px;
color:#000;
line-height:30px;
font-size:14px;

}

#sbdmenu .menu ul li ul {
display: none;
}

#sbdmenu .menu ul li:hover a {
color:#000;
font-size:14px;
font-weight:600;
}

#sbdmenu .menu ul li:hover ul {
display:inline;
position:absolute;
top:38px;
left:0;
width:700px;

}

#sbdmenu .menu ul li:hover ul li a {
display:inline;
background:#69859f;
color:#fff;
padding:4px;
font-size:12px;
font-weight:normal;
}

#sbdmenu .menu ul li:hover ul li a:hover {
background:#69859f;
color:#fff;
font-size:12px;
font-weight:normal;

}
</style>

</head>
<body>
<table width="734" height="119" border="0" cellpadding="0" cellspacing="0">
       <tr>
       <td height="39"></td>
       </tr>
       <tr>
         <td height="79" valign="top"> 
         <div id="sbdmenu">
 <div class="menu">
<ul>
<li><a href="#" class="hide">Home</a>
</li>

<li><a class="hide" href="#">About US</a>

</li>
<li><a class="hide" href="#">Products</a>
<ul>
<li><a href=" #" >P1</a></li>
<li><a href=" #" >P2</a></li>
<li><a href=" #">P3</a></li>
<li><a href=" #" >P4</a></li>
</ul>
</li>


<li><a class="hide" href="#">News</a>

<ul>
<li><a href="#">N1</a></li>
<li><a href="#">N2</a></li>
</ul>

</li>
<li><a class="hide" href="#">Feedback</a>

<ul>
<li><a href="#">f1</a></li>
<li><a href="#">f2</a></li>
<li><a href="#">f3</a></li>

</ul>

</li>

<li><a class="hide" href="#">Contact</a>

</li>

</ul>

<div class="clear"> </div>
</div>
</div>
</td>
</tr>
 </table>
</body>
</html>






------解决方案--------------------
不识别li:hover这种写法。

这样的问题网上有解决方法

css 菜单
------解决方案--------------------
我也是这样问题,坐等高手解决!
------解决方案--------------------
哦,css菜单
------解决方案--------------------
不识别li:hover这个,不过,可以用一段jquery代码搞定:
$('.menu ul li').mouseover(function(){
$(this).find('ul').show();
$(this).addClass('lihover');
});
$('.menu ul li').mouseout(function(){
$(this).find('ul').hide();
$(this).removeClass('lihover');
  相关解决方案