码迷,mamicode.com
首页 > Web开发 > 详细

css导航栏下拉菜单代码【转自http://zxm.92.blog.163.com/blog/static/544600282010727112723874/】

时间:2014-07-15 09:04:03      阅读:267      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   java   color   os   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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;}   
.menu{font-size:9pt;position:relative;z-index:100;}   
.menu ul{list-style:none;}   
.menu li {float:left;position:relative;}   
.menu ul ul {visibility:hidden;position:absolute;left:3px;top:23px;}   
.menu table {position:absolute; top:0; left:0;}   
.menu ul li:hover ul,   
.menu ul a:hover ul{visibility:visible;}   
.menu a{display:block;border:1px solid #555;background:#cacaca;padding:2px 10px;margin:3px;color:#fff;text-decoration:none;}   
.menu a:hover{background:#666;color:#fff;border:1px solid #000;}   
.menu ul ul{}   
.menu ul ul li {clear:both;text-align:left;font-size:12px;}   
.menu ul ul li a{display:block;width:100px;height:15px;margin:0;border:0;border-bottom:1px solid #858585;}   
.menu ul ul li a:hover{border:0;background:#666;border-bottom:1px solid #fff;}   
</style>  
</head>  
<body>
<div class="menu">
  <ul>
    <li><a href="#">CSS教程</a>
        <ul>
          <li><a href="#">WEV标准</a></li>
          <li><a href="#">技术文章</a></li>
          <li><a href="#">布局实例</a></li>
          <li><a href="#">教程专题</a></li>
        </ul>
      </li>
    <li><a href="#">艺术欣赏
      <!--[if IE 7]><!--></a><!--<![endif]-->
          <!--[if lte IE 6]><table><tr><td><![endif]-->
      </a>
        <ul>
          <li> <a href="#"></a><a href="#">经典外站</a></li>
          <li><a href="#">配色研究</a></li>
        </ul>
      <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a href="#">Javascript
      <!--[if IE 7]><!--></a><!--<![endif]-->
          <!--[if lte IE 6]><table><tr><td><![endif]-->
      </a>
        <ul>
          <li> <a href="#"></a><a href="#">JSON</a></li>
          <li><a href="#">EXTJS</a></li>
        </ul>
      <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a href="#">DOM</a></li>
    <li><a href="#">XML</a></li>
    <li><a href="#">正则表达式
      <!--[if IE 7]><!--></a><!--<![endif]-->
          <!--[if lte IE 6]><table><tr><td><![endif]-->
      </a>
        <ul>
          <li> <a href="#"></a><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]-->
      </a>
        <ul>
          <li> <a href="#"></a><a href="#">PHP</a></li>
          <li><a href="#">JSP</a></li>
          <li><a href="#">ASP.NET</a></li>
        </ul>
      <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
  </ul>
</div>
</body>  
</html>

 

css导航栏下拉菜单代码【转自http://zxm.92.blog.163.com/blog/static/544600282010727112723874/】,布布扣,bubuko.com

css导航栏下拉菜单代码【转自http://zxm.92.blog.163.com/blog/static/544600282010727112723874/】

标签:style   blog   http   java   color   os   

原文地址:http://www.cnblogs.com/huafeng17/p/3841590.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!