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

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

www.MyException.Cn  网友分享于: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;}

文章评论

软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有