读书人
栏目▼

今天在网下找了个纯css实现的上拉菜单

发布时间： 2013-02-19 11:11:40 作者： rapoo

今天在网上找了个纯css实现的下拉菜单，在IE8、FF、谷歌、360浏览器均完美支持，唯独ie6没有效果，望高手加以改进，谢谢！
今天在网上找到一个很不错的下拉菜单，完全是用css实现的，不用js，很不错，在IE8、FF、谷歌、360等浏览器下都没问题，但是不知道是哪里的问题，在IE6下，没有下拉菜单效果，望高手加以改进：


<!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=gb2312" />
<title>一个很不错的下拉导航菜单</title>

<style type="text/css">
<!--
#navParent {position:absolute;margin:0 auto 0 auto !important;background-color:#3591da;height: 29px;width: auto;font-size:12px;}
#navParent ul {text-align:center;padding: 0;margin: 0;list-style: none;}
#navParent ul a{color:#ffffff;font-size:12px;}        
#navParent li {float: left;width: 120px;border-right:2px solid #fff;}
#navParent li ul {display: none;}
#navParent li ul li{width:230px;text-align:left;}
#navParent li:hover ul, li.over ul {display: block;}
#navParent ul li a {background-color:#3591da;padding:7px;border-bottom:1px white solid;text-decoration: none;display:block;font-weight: bolder;}
#navParent ul li a:hover{background-color:#076bb9;}
-->
</style>
</head>

<body>
<div id="navParent">
<ul>
  <li><a href="">Computers</a>
    <ul>
      <li><a href="">Computer Parts</a></li>
      <li><a href="">USB Flash Memory</a></li>
      <li><a href="">Batteries</a></li>
      <li><a href="">USB data cable</a></li>
  <li><a href="">Computer Hardware</a></li>
  <li><a href="">Earphone</a></li>
  <li><a href="">Remote Storage</a></li>
</ul>
</li>

  <li><a href="">Electronics </a>
    <ul>
      <li><a href="">GPS</a></li>
  
      <li><a href="">Bluetooth Carkits</a></li>
      <li><a href="">Cell phones</a></li>
      <li><a href="">MP3/MP4</a></li>
  <li><a href="">Digital Cameras</a></li>  
</ul>
</li>

<li><a href="">Toys</a>
    <ul>
      <li><a href="">Games</a></li>
      <li><a href="">Remote Control Toys</a></li>
      <li><a href="">Toys by Ages</a></li>
     </ul>
</li>

<li><a href="">Cameras</a>
    <ul>
      <li><a href="">Digital Cameras</a></li> 
 
      <li><a href="">Camcorders</a></li>
      <li><a href="">Batteries</a></li>
      <li><a href="">Memory Cards</a></li>  
</ul>
</li>

<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>
</body>
</html>

[解决办法]
多浏览器兼容是自古以来的难题。尤其是奇葩的IE6。。。。
[解决办法]
ie6 只有工a 标签支持 :hover，A标签又不能嵌套A
兼容所有浏览器，用JS实现
[解决办法]
引用:
求实现这个下拉菜单的js！


<!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=gb2312" />
<title>一个很不错的下拉导航菜单</title> 
 

<style type="text/css">
<!--
#navParent {position:absolute;margin:0 auto 0 auto !important;background-color:#3591da;height: 29px;width: auto;font-size:12px;}
#navParent ul {text-align:center;padding: 0;margin: 0;list-style: none;}
#navParent ul a{color:#ffffff;font-size:12px;}        
#navParent li {float: left;width: 120px;border-right:2px solid #fff; position: relative;}
#navParent li ul {display: none;  position:absolute; left:0px}
#navParent li ul li{width:230px;text-align:left;}

/* #navParent li:hover ul, li.over ul {display: block;} */

#navParent ul li a {background-color:#3591da;padding:7px;border-bottom:1px white solid;text-decoration: none;display:block;font-weight: bolder;}
#navParent ul li a:hover{background-color:#076bb9;}
-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>

<body>

<div id="navParent">
<ul>
  <li><a href="">Computers</a>
    <ul>
      <li><a href="">Computer Parts</a></li>
      <li><a href="">USB Flash Memory</a></li>
      <li><a href="">Batteries</a></li>
      <li><a href="">USB data cable</a></li>
  <li><a href="">Computer Hardware</a></li>
  <li><a href="">Earphone</a></li>
  <li><a href="">Remote Storage</a></li>
</ul>
</li>

  <li><a href="">Electronics </a>
    <ul>
      <li><a href="">GPS</a></li>
  
      <li><a href="">Bluetooth Carkits</a></li>
      <li><a href="">Cell phones</a></li>
      <li><a href="">MP3/MP4</a></li>
  <li><a href="">Digital Cameras</a></li>  
</ul>
</li>

<li><a href="">Toys</a>
    <ul>
      <li><a href="">Games</a></li>
      <li><a href="">Remote Control Toys</a></li>
      <li><a href="">Toys by Ages</a></li>
     </ul>
</li>

<li><a href="">Cameras</a>
    <ul>
      <li><a href="">Digital Cameras</a></li>
      <li><a href="">Camcorders</a></li>
      <li><a href="">Batteries</a></li>
      <li><a href="">Memory Cards</a></li>  
</ul>
</li> 
 

<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;} 
 
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; margin-right:1px; position:relative;}
.menu ul li ul {display: none;}

/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#36f;}
.menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#ddd; color:#000;}
.menu ul li:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-105px;}

</style>
<!--[if lte IE 6]>
<style type="text/css">
.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}

.menu ul li a:hover {color:#fff; background:#36f;}
.menu ul li a:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
.menu ul li a:hover ul li a.sub {background:#6a3; color:#fff;}
.menu ul li a:hover ul li a {display:block; background:#ddd; color:#000;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;}
.menu ul li a:hover ul li a:hover ul.left {left:-105px;}

</style>
<![endif]-->
</head>

<body>

<div class="menu">

<ul>
<li><a class="hide" href="../menu/index.html">DEMOS</a>

<!--[if lte IE 6]>
<a href="../menu/index.html">DEMOS
<table><tr><td>
<![endif]-->

    <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 class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK ></a>

  <!--[if lte IE 6]>
  <a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK > 
 
  <table><tr><td>
  <![endif]-->

        <ul>
            <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/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
        </ul>

    <!--[if lte IE 6]>
    </td></tr></table>
  </a>
  <![endif]-->

    </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>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="index.html">MENUS</a>

<!--[if lte IE 6]>
<a href="index.html">MENUS
<table><tr><td>
<![endif]-->

    <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>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="../layouts/index.html">LAYOUTS</a>

<!--[if lte IE 6]>
<a href="../layouts/index.html">LAYOUTS
<table><tr><td> 
 
<![endif]-->

    <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>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="../boxes/index.html">BOXES</a>

<!--[if lte IE 6]>
<a href="../boxes/index.html">BOXES
<table><tr><td>
<![endif]-->

    <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>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="../mozilla/index.html">MOZILLA</a>

<!--[if lte IE 6]>
<a href="../mozilla/index.html">MOZILLA
<table><tr><td>
<![endif]-->

    <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>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="../ie/index.html">EXPLORER</a>

<!--[if lte IE 6]>
<a href="../ie/index.html">EXPLORER
<table><tr><td>
<![endif]-->

    <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>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="../opacity/index.html">OPACITY</a>

<!--[if lte IE 6]>
<a href="../opacity/index.html">OPACITY
<table><tr><td>
<![endif]-->

    <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>
    <li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">< HOVER/CLICK</a>

  <!--[if lte IE 6]>
  <a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">< HOVER/CLICK
  <table><tr><td>
  <![endif]-->

        <ul class="left">
            <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/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
        </ul>

    <!--[if lte IE 6]> 
 
    </td></tr></table>
  </a>
  <![endif]-->

    </li>
    </ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>
</ul>

</div>

</body>
</html>



[解决办法]
纯css 实现的下拉 各浏览器兼容 我有现成的 demo 不帮你 改你的 。楼主你自己看 我的demo在修改你自己的。


  <div id="navall">
    <div id="nav">
      <ul>
        <!--<li><a href="#"></a></li>-->
        <li><a href="#">关于我们
          <!--[if IE 7]><!--></a><!--<![endif]-->
          <!--[if lte IE 6]><table><tr><td><![endif]-->
          <ul>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">关于我们</a></li>
          </ul>
          <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        <li><a href="#">公司荣誉</a></li>
        <!--<li><a href="#"></a></li>-->
        <li><a href="#">关于我们关于我们
          <!--[if IE 7]><!--></a><!--<![endif]-->
          <!--[if lte IE 6]><table><tr><td><![endif]-->
          <ul>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">CSS关于我们</a></li>
          </ul> 
 
          <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">关于我们</a></li>
      </ul>
    </div>
  </div>

[code=css]
#navall, #nav, #nav ul, #nav ul li, #nav ul li a { overflow:visible; }
#navall { float:left; width:900px; padding-top:200px; }
#nav { width:900px; height:20px; background:#f7f7f7; }
#nav ul ul { visibility:hidden; height:auto; position:absolute; background:#FFF; padding:0; margin:0; filter:alpha(opacity=90); -moz-opacity:0.9;opacity:0.9; }
#nav ul ul { width:120px; left:0; top:20px; line-height:normal; }
#nav li { position:relative; z-index:500; float:left; display:block; height:20px; line-height:20px; padding:0 10px; }
#nav table { _margin-top:-5px; }
#nav ul li a { _overflow:hidden; display:inline-block; height:20px; line-height:20px; }
#nav ul li a:hover { border-bottom: solid 0px #000; overflow:visible; }
#nav li:hover ul, #nav a:hover ul { visibility:visible; line-height:normal; }
#nav ul li ul li { width:auto; float:none; display:block; margin:0; padding:0; height:auto; background:none; line-height:normal; }
#nav ul li ul li a { overflow:visible; width:auto; height:1%; line-height:120%; display:block; padding:5px; margin:0; float:none; text-decoration:none; text-align:left; color:#666; font-weight:normal; font-size:12px; font-family:Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica; border:solid 1px #fafafa; border-bottom-color:#eee; border-top-color:#fafafa; background:#f3f3f3; }
#nav ul li ul li a:hover { overflow:visible; width:auto; height:1%; line-height:120%; display:block; padding:5px; margin:0; float:none; text-decoration:none; text-align:left; color:#666; font-weight:normal; font-size:12px; font-family:Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica; border:solid 1px #F90; border-bottom-color:#eee; border-top-color:#fafafa; background:#eee; }

[/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=gb2312" />
<title>一个很不错的下拉导航菜单</title>

<style type="text/css">
<!--
#navParent {position:absolute;margin:0 auto 0 auto !important;background-color:#3591da;height: 29px;width: auto;font-size:12px;}
#navParent ul {text-align:center;padding: 0;margin: 0;list-style: none;} 
 
#navParent ul a{color:#ffffff;font-size:12px;}        
#navParent li {float: left;width: 120px;border-right:2px solid #fff; position: relative;}
#navParent li ul {display: none;  position:absolute; left:0px}
#navParent li ul li{width:230px;text-align:left;}
#navParent li:hover ul, li.over ul {display: block;}
#navParent ul li a {background-color:#3591da;padding:7px;border-bottom:1px white solid;text-decoration: none;display:block;font-weight: bolder;}
#navParent ul li a:hover{background-color:#076bb9;}
#navParent ul li ul a {background-color:#3591da;  padding:0px;  width:100%;  line-height:25px; height:25px; padding-left:7px; }
#navParent ul li a:hover{background-color:#076bb9;}

-->
</style>
<script language="javascript"> 
stuHover = function() { 
var cssRule; 
var newSelector; 
for (var i = 0; i < document.styleSheets.length; i++) 
   for (var x = 0; x < document.styleSheets[i].rules.length ; x++) 
    { 
    cssRule = document.styleSheets[i].rules[x]; 
    if (cssRule.selectorText.indexOf("LI:hover") != -1) 
    { 
     newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover"); 
     document.styleSheets[i].addRule(newSelector , cssRule.style.cssText); 
    } 
   } 
var getElm = document.getElementById("navParent").getElementsByTagName("LI"); 
for (var i=0; i<getElm.length; i++) { 
   getElm[i].onmouseover=function() { 
    this.className+=" iehover"; 
   } 
   getElm[i].onmouseout=function() { 
    
    this.className=this.className.replace(new RegExp(" iehover\\b"), ""); 
    
   } 
} 
} 
if (window.attachEvent) window.attachEvent("onload", stuHover); 
</script>

</head>

<body>

<div id="navParent">
<ul>
  <li><a href="">Computers</a>
    <ul>
      <li><a href="">Computer Parts</a></li>
      <li><a href="">USB Flash Memory</a></li>
      <li><a href="">Batteries</a></li>
      <li><a href="">USB data cable</a></li>
  <li><a href="">Computer Hardware</a></li>
  <li><a href="">Earphone</a></li>
  <li><a href="">Remote Storage</a></li>
</ul>
</li>

  <li><a href="">Electronics </a>
    <ul>
      <li><a href="">GPS</a></li> 
 
  
      <li><a href="">Bluetooth Carkits</a></li>
      <li><a href="">Cell phones</a></li>
      <li><a href="">MP3/MP4</a></li>
  <li><a href="">Digital Cameras</a></li>  
</ul>
</li>

<li><a href="">Toys</a>
    <ul>
      <li><a href="">Games</a></li>
      <li><a href="">Remote Control Toys</a></li>
      <li><a href="">Toys by Ages</a></li>
     </ul>
</li>

<li><a href="">Cameras</a>
    <ul>
      <li><a href="">Digital Cameras</a></li>
      <li><a href="">Camcorders</a></li>
      <li><a href="">Batteries</a></li>
      <li><a href="">Memory Cards</a></li>  
</ul>
</li>

<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>

</body>
</html>

读书人网 >CSS

热点推荐

触屏版 | 电脑版

读书人网 m.reader8.net