纯CSS制造下拉菜单

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html>  
  3. <!-- www.div-css.com 网站标准化   2007-4-16 -->  
  4. <head>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  6. <title>纯CSS的下拉菜单 支持IE6 IE7 Firefox --www.div-css.com 网站标准化</title>  
  7.   
  8. <style type="text/css">  
  9. *{margin:0;padding:0;}   
  10. .menu{font-size:12px;position:relative;z-index:100;}   
  11. .menu ul{list-style:none;}   
  12. .menu li {float:left;position:relative;}   
  13. .menu ul ul {visibility:hidden;position:absolute;left:3px;top:23px;}   
  14. .menu table {position:absolute; top:0; left:0;}   
  15. .menu ul li:hover ul,   
  16. .menu ul a:hover ul{visibility:visible;}   
  17. .menu a{display:block;border:1px solid #aaa;background:red;padding:2px 10px;margin:3px;color:#fff;text-decoration:none;}   
  18. .menu a:hover{background:#f2cdb0;color:#f00;border:1px solid red;}   
  19. .menu ul ul{}   
  20. .menu ul ul li {clear:both;text-align:left;font-size:12px;}   
  21. .menu ul ul li a{display:block;width:100px;height:13px;margin:0;border:0;border-bottom:1px solid red;}   
  22. .menu ul ul li a:hover{border:0;background:#f2cdb0;border-bottom:1px solid #fff;}   
  23. </style>  
  24. </head>  
  25.   
  26. <body>  
  27.   
  28. <div class="menu">  
  29.     <ul>  
  30.         <li><a href="">XHTML/CSS    <!--[if IE 7]><!--></a><!--<![endif]-->  
Copyright ?2005-2008 All rights reserved. www.17zixue8.com 版权所有    赣ICP备07501614号        完美兵团会员待遇说明    站主QQ:335759285