当前位置:我的异常网» HTML/CSS » 今天在网下找了个纯css实现的上拉菜单，在IE8、FF、

今天在网下找了个纯css实现的上拉菜单，在IE8、FF、谷歌、360浏览器均完美支持，唯独ie6没有效果，望高手加以改进，多谢(4)

www.myexceptions.net 网友分享于：2013-02-20 浏览：45次

<li><a href="">CellPhones </a>
    <ul>
      <li><a href="">Free Cellphones with Plans</a></li>
      <li><a href="">Refurbished cellphones</a></li>
      <li><a href="">Prepaid Refills</a></li>
      <li><a href="">Free Ringtones</a></li>
  <li><a href="">Cellphone Accessories</a></li>
</ul>
</li>

<li><a href="">Batteries </a>
    <ul>
      <li><a href="">Cellphone Batteries</a></li>
  <li><a href="">Laptop Batteries</a></li>
      <li><a href="">Digital Camera Batteries</a></li>
      <li><a href="">Camcorder Batteries</a></li>
  <li><a href="">PDA Batteries</a></li>
  <li><a href="">Ipod/MP3 Batteries</a></li>
  <li><a href="">Others</a></li>
</ul>
</li>

<li><a href="">Video Games</a>
    <ul>
      <li><a href="">Wii</a></li>
  <li><a href="">Xbox 360</a></li>
      <li><a href="">PlayStation 2/PS 2</a></li>
      <li><a href="">Nintendo DS</a></li>
  <li><a href="">PlayStation 3/PS 3</a></li>
  <li><a href="">PSP</a></li>
  <li><a href="">PC games</a></li>
     <li><a href="">Game Console</a></li>
  <li><a href="">Accessories</a></li>
</ul>
</li>
</ul>
</div>
<script>
  $('#navParent>ul>li').hover(
    function(){
       $(this).find('ul').show()
    },
    function(){
       $(this).find('ul').hide()
    }
  );
</script>
</body>
</html>

------解决方案--------------------
要解决IE6中非a元素的hover伪类问题，通常是采用IE的条件注释来完成，下面是一个兼容IE6的纯CSS+HTML的下拉菜单代码：



<!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>三级dropdown弹出菜单</title>

<style type="text/css">

/* common styling */

.menu {font-family: arial, sans-serif; width:750px; position:relative; margin:0; font-size:11px; margin:50px 0;}

.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #fff; background:#710069; line-height:20px; font-size:11px; overflow:hidden;}