纯CSS的下拉菜单 支持IE6 IE7 Firefox
转载本站文章请注明，转载自：昕星谷[http://oneyicn.gobaiyi.com]
本文链接: 纯CSS的下拉菜单 支持IE6 IE7 Firefox">http://oneyicn.gobaiyi.com/archives/1817/
先前发过一个纯CSS的下拉菜单，由于用新的CSS标准，发现那可爱的IE6不支持，现在总算体会到网页浏览器的重要性了，要是他们都统一支持新的标准多好。对网页开发者来说就是一个巨大的福音，想信不久就会到来了，也知道goolge支持IE6到2012年的原因了，看看我们国内的网站会不会有这强力的宣布不支持IE6。真希望新装的系统都用上ie8，其实ie8也是非常的好用了，用了快一年，而且各用网站应用环境都使用过，效果也是非常好的，比起那ie6来，当然还是用Firefox更多些。这不，不了支持IE6，把上次的代码又重新整理了一下，效果也是差不多了。演示地址：css_menu_ie6.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>纯CSS的下拉菜单 支持IE6 IE7 Firefox </title> <style type="text/css"> *{margin:0;padding:0;} ul,li{list-style:none;} /*定义飘浮跟宽度样式*/ .fl { float:left;} .fr { float:right;} .menuw260{width:260px;} .menuw130{width:130px;} .divnone{float:none; clear:both;} /*主菜单栏*/ .menu{font-size:12px;position:relative;z-index:1000;line-height:35px;} .menu li {float:left;position:relative;} .menu li a{display:block;border-right:1px dotted #fff;background:#B41F3D;padding:0px 10px;margin:0px;color:#fff;text-decoration:none;} .menu li a:hover{background:#E86F82;color:#fff;} /*下拉菜单项*/ .menu ul ul {visibility:hidden;position:absolute;left:0px;top:34px;border:1px solid #B41F3D;} .menu table {position:absolute; top:0; left:0;} .menu ul li:hover ul, .menu ul a:hover ul{visibility:visible;} /*下拉菜单链接*/ .menu ul ul li {text-align:left;border-left:1px solid #B41F3D;} .menu ul ul li a{display:block;width:90px;line-height:30px;margin:0;border:0;background:#fff;color:#000;} .menu ul ul li a:hover{background-color:#E22924;color:#fff;border:0;} .menuw1 {width:222px;} /*下拉菜单底栏*/ #menuli1{} #menuli1 a{width:90px;background-color:#F4CCCC;color:#000;line-height:20px; } #menuli1 a:hover{width:90px;background-color:#E22924;color:#fff;border:0;} /*下拉菜单底栏*/ #menuli2{} #menuli2 a{width:200px;background-color:#F4CCCC;color:#000;line-height:20px; } #menuli2 a:hover{width:200px;background-color:#E22924;color:#fff;border:0;} </style> </head> <body> <div style="background:#eee"> <h2><a href="http://oneyicn.gobaiyi.com/">本演示由昕星谷提供</a> <a href="http://oneyicn.gobaiyi.com/archives/1808/">转到下载页</a></h1> </div> <div> <ul> <li ><a href="" style="">无下拉菜单</a> <li ><a href="" style="">菜单1 <!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li> <a href="">下拉菜单11</a> <a href="">下拉菜单12</a> <a href="">下拉菜单13</a> <a href="">下拉菜单14</a></li> <li> <a href="">下拉菜单21</a> <a href="">下拉菜单22</a> <a href="">下拉菜单23</a> <a href="">下拉菜单24</a></li> <li id="menuli2"> <a href="" >下拉菜单底栏</a> <a href="" >下拉菜单底栏</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li ><a href="" style="">菜单2 <!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="">菜单21</a></li> <li><a href="">菜单22</a></li> <li><a href="">菜单23</a></li> <li><a href="">菜单24</a></li> <li><a href="">菜单25</a></li> <li id="menuli1"><a href="">菜单26</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </ul> </div> <div></div> <div style="background:#eee"> <h2><a href="http://oneyicn.gobaiyi.com/">本演示由昕星谷提供</a> <a href="http://oneyicn.gobaiyi.com/archives/1808/">转到下载页</a></h1> </div> </body> </html>
近期评论