CCS实现的级联菜单

xiaoshao

浏览: 49767 次

最近访客更多访客>>

loginboot

xiuqiuka

lygily

贝尔是条狗

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

<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>