现在的位置: 首页 > 综合 > 正文

CCS实现的级联菜单

2013年06月21日 ⁄ 综合 ⁄ 共 3320字 ⁄ 字号 评论关闭


<html>
<head>
 <title>CSS menu</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf8" />
 <script type="text/javascript">
  startlist = function(){
   if(document.all&&document.getElementById){
    navRoot = document.getelementById("nav");
    for(i = 0; i < navRoot.childNodes.length; i++){
     node = navRoot.childNodes[i];
     if(node.nodeName == "LI"){
      node.onmouseover=function(){
       this.className+=" over";
      }
      node.onmouseout=function(){
       this.className=this.className.replace(" over","");
      }
     }
    }
   }
  }
  window.onload=startlist;
 </script>
 <style type="text/css">
  html{min-width:732px;}
  img{border:0;}
  p.access{display:none;}
  div#counters{display:none;}
  a{text-decoration:none;}
  
  body{
   overflow:auto;
   text-align:center;
   margin: 0 auto;
   padding: 0;
   border:0;
   background: #fff;
   color: #000;
   font: small/10px "宋体",Verdana,Helvetica,sans-serif;
  }

  ul#nav, ul#nav ul{
   margin: 0 auto;
   text-align:left;
   padding:0;
   list-style:none;
   background:#fff;
   z-index:99;
  }
  ul#nav{
   width:732px;
   display:block;
   height:24px;
   clear:both;
  }
  ul#nav li{
   position: relative;
   z-index:999;
   float:left;
  }
  ul#nav ul li{
   display:bolck;
  }
  ul#nav ul{
   width:100px;
   height:auto;
   position:absolute;
   text-align:left;
   left:0px;
   display:none;
   boder:solid 1px #697210;
  }
  ul#nav li.over a, ul#nav li.hover a{
   border-color:#E2144A;
   background:#fdd;
   font-weight:bold;
   color:#E2144A;
  }
  ul#nav li.over a, ul#nav.hover ul a{
   background:#fff;
   font-weight:normal;
   color:#777;
  }
  ul#nav li.over ul a.hover, ul#nav li.hover ul a:hover{
   background:#fff;
   font-weight:normal;
   color:#E2144A;
   background:#fdd;
   border-color:#E2144A;
   font-weight:bold;
  }
  ul#nav a{
   font-size:14px;
   line-height:17px;
   display:block;
   padding:0 0 0 10px;
   width:78px;
   color:#777;
   height:17px;
   background:#fff;
   border-left:solid 1px #fff;
   border-top:solid 1px #fff;
   border-right:solid 1px #fff;
   border-bottom:solid 5px #697210;
  }
  ul#nav ul li{
   width:100px;
   border:0;
  }
  
  *html ul#nav li{float:left;height:17px;}
  *html ul#nav li a{height: 17px;}

  ul#nav ul a{ padding:2px 0px 2px 10px; border:0; width:90px;}
  ul#nav li:hover ul, ul#nav li.over ul {display:block}
               
 </style>
</head>
<body>
 <ul id='nav'>
  <li><a href="/g.php/working.html">文章11</a>
   <ul>
   <li><a href="wok/29.html">随笔22</a></li>
   <li><a href="wok/29.html">小说22</a></li>
   <li><a href="wok/29.html">诗歌22</a></li>
   <li><a href="wok/29.html">文稿22</a></li>
   </ul>
  </li>
  <li><a href="/graph.html">美图</a>
   <ul>
   <li><a href="wok/29.html">漫画</a></li>
   <li><a href="wok/29.html">摄影</a></li>
   <li><a href="wok/29.html">GG作品</a></li>
   <li><a href="wok/29.html">图文</a></li> 
   </ul>
  </li>
  <li><a href="#1">工具</a>
   <ul>
   <li><a href="wok/29.html">在线工具</a></li>
   <li><a href="wok/29.html">代码搜集</a></li>
   <li><a href="wok/29.html">实验室</a></li>
   <li><a href="wok/29.html">技术文章</a></li> 
   </ul>
  </li>
  <li><a href="#1">网站收藏</a></li>
  <li><a href="#1">读书笔记</a>
   <ul>
   <li><a href="wok/29.html">哲学</a></li>
   <li><a href="wok/29.html">小说</a></li> 
   </ul>
  </li>
  <li><a href="#1">日记</a>
   <ul>
   <li><a href="wok/29.html">生活</a></li>
   <li><a href="wok/29.html">工作</a></li> 
   </ul>
  </li>
  <li><a href="#1">计划</a>
   <ul>
   <li><a href="wok/29.html">计划要做的</a></li>
   <li><a href="wok/29.html">计划要买的</a></li> 
   </ul>
  </li>
 </ul>
<body>
 
</html>

抱歉!评论已关闭.