CSS二级菜单

 

< ! 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 >
< title > 子叶：测试css菜单显示效果 </ title >
< meta http-equiv = " Content-Type " content = " text/html; charset=utf-8 " />
< meta http-equiv = " Content-Language " content = " zh-cn " />
< meta http-equiv = " imagetoolbar " content = " false " />
< meta name = " robots " content = " all " />
< meta name = " keywords " content = " 子乌,Sheneyan,子虚乌有,xhtml,html,js,css,php " />
< meta name = " author " content = " Sheneyan " />
< meta name = " Description " content = " 子乌的站 " />
< meta name = " copyright " content = " Copyright (c) 2004-2005 Sheneyan " />
< meta name = " MSSmartTagsPreventParsing " content = " true " />
 
< link rel = " shortcut icon " href = " /favicon.ico " type = " image/x-icon " />
< link rel = " ICON " href = " /favicon.ico " type = " image/x-icon " />
< script type = " text/javascript " >
/**
*菜单的构造,需要绑定到onload
*/
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 " media = " all " >
/**
子乌的叶子css：主样式表
这个样式表的结构参考了 < a href = " http://www.zeldman.com " > zeldman </ a > 的样式表结构
update:05.11.18
author:sheneyan
*/
 
html {min-width: 742px;}
 
/*css基本规则*/
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/18px "宋体", Verdana, Helvetica, sans-serif;
}
/**菜单的控制，根据 < a href = " http://www.alistapart.com/d/horizdropdowns/horizontal2.htm " > css 菜单 </ a > 修改而来*/
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:block;
}
ul#nav ul {
    width:100px;
    height:auto;
    position: absolute;
    text-align:left;
    left: 0px;
    display: none;
    border: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 ul a,ul#nav li:hover ul a{
    background:#fff;
    font-weight:normal;
    color:#777;
}
/*子菜单的hover样式*/
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;
}
 
/* Styles for Menu Items */
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;
}
/* Fix IE. Hide from IE Mac /*/
* html ul#nav li { float: left; height: 17px; }
* html ul#nav li a {  height: 17px; }
/* End */
 
ul#nav ul a { padding: 2px 0px 2px  10px;border:0;width:90px;     } /* Sub Menu Styles */
        
ul#nav li:hover ul,ul#nav  li.over ul { display: block; } /* The magic */
</ style >
< body >
测试css菜单显示效果 < br />
<!--菜单开始-->
< ul id =' nav ' >
     < li >< a href ='/ g . php / working . html ' > 文章 </ a >
         < ul >
             < li >< a href ='/ g . php / working / 29 . html ' > 随笔 </ a ></ li >
             < li >< a href ='/ g . php / working / 30 . html ' > 小说 </ a ></ li >
             < li >< a href ='/ g . php / working / 31 . html ' > 诗 </ a ></ li >
             < li >< a href ='/ g . php / working / 32 . html ' > 文摘 </ a ></ li >
         </ ul >
     </ li >
     < li >< a href ='/ g . php / pic . html ' > 美图 </ a >
         < ul >
             < li >< a href ='/ g . php / pic / 19 . html ' > 漫画 </ a ></ li >
             < li >< a href ='/ g . php / pic / 20 . html ' > 摄影 </ a ></ li >
             < li >< a href ='/ g . php / pic / 33 . html ' > CG作品 </ a ></ li >
             < li >< a href ='/ g . php / pic / 41 . html ' > 图+文 </ a ></ li >
         </ ul >
     </ li >
     < li >< a href ='#' > 技术 </ a >
         < ul >
             < li >< a href ='/ g . php / tech / tool / 37 . html ' > 在线工具 </ a ></ li >
             < li >< a href ='/ g . php / tech / collect / 43 . html ' > 代码收集 </ a ></ li >
             < li >< a href ='/ g . php / tech / lab / 44 . html ' > 实验室 </ a ></ li >
             < li >< a href ='/ g . php / tech / article / 45 . html ' > 技术文章 </ a ></ li >
         </ ul >
     </ li >
     < li >< a href ='/ g . php / fav . html ' > 网站收藏夹 </ a ></ li >
     < li >< a href ='/ g . php / working . html ' > 读书笔记 </ a >
         < ul >
             < li >< a href ='/ g . php / working / 22 . html ' > 哲学 </ a ></ li >
             < li >< a href ='/ g . php / working / 23 . html ' > 小说 </ a ></ li >
         </ ul >
     </ li >
     < li >< a href ='/ g . php / working . html ' > 日记 </ a >
         < ul >
             < li >< a href ='/ g . php / working / 27 . html ' > 生活 </ a ></ li >
             < li >< a href ='/ g . php / working / 28 . html ' > 工作 </ a ></ li >
         </ ul >
     </ li >
     < li >< a href ='#' > 计划 </ a >
         < ul >
             < li >< a href ='/ g . php / todo / 39 . html ' > 计划要做的事 </ a ></ li >
             < li >< a href ='/ g . php / tobuy / 40 . html ' > 计划要买的 </ a ></ li >
         </ ul >
     </ li >
     < li >< a href ='/ g . php / working . html ' > 其他 </ a >
         < ul >
             < li >< a href ='/ g . php / working / 34 . html ' > 关于本站 </ a ></ li >
             < li >< a href ='/ g . php / working / 35 . html ' > 留言 </ a ></ li >
             < li >< a href ='/ g . php / working / 36 . html ' > 友情链接 </ a ></ li >
         </ ul >
     </ li >
</ ul > <!--菜单结束-->
< a href = " http://sheneyan.com " title = " 子叶:子乌的叶子 " >< img style = " border:0 " src = " http://sheneyan.com/logo.png " alt = " 子叶 " /></ a >
</ body >
</ html >