css下拉菜单[转]

朝闻书斋 2014-03-07

展开全文

源地址：http://tieba.baidu.com/p/2891515695?fr=ala0&pstaala=2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www./1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Css+Xhtml下拉菜单</title>
<style>
body {
background:#fff;
}
ul,li {
margin:0;
padding:0;
list-style:none;
}
h3 {
text-align:center;
}
#nav {
font-size:12px;
color:#999;
}
#nav > ul > li {
height:auto;
padding:4px 0;
text-align:center;
width:120px;
border:1px solid #eee;
background-color:#fafafa;
cursor:pointer;
position:relative;
float:left;
margin:10px;
}
#nav > ul > li:hover {
border:1px solid #9CDD75;
background-color:#F1FBEC;
border-bottom:none;
color:#666;
}
#nav > ul > li > ul {
width:120px;
background-color:#F1FBEC;
position:absolute;
top:20px;
left:-1px;
border:1px solid #9CDD75;
border-top:none;
display:none;
}
#nav > ul > li > ul li {
height:auto;
padding:4px 0;
}
#nav > ul li:hover > ul {
display:block;
}
#nav > ul > li > ul li a {
color:#333;
text-decoration:none;
width:100px;
padding:4px 0;
display:inline-block;
}
#nav > ul > li > ul li a:hover {
background:lightgreen;
font-weight:bold;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li>我的首页
<ul>
<li><a href="#">我的Png</a></li>
<li><a href="#">我的Gif</a></li>
<li><a href="#">我的酷站</a></li>
<li><a href="#">我的日志</a></li>
<li><a href="#">我的相册</a></li>
<li><a href="#">我的收藏</a></li>
</ul>
</li>

<li>我的首页
<ul>
<li><a href="#">我的Png</a></li>
<li><a href="#">我的Gif</a></li>
<li><a href="#">我的酷站</a></li>
<li><a href="#">我的日志</a></li>
<li><a href="#">我的相册</a></li>
<li><a href="#">我的收藏</a></li>
</ul>
</li>

<li>我的首页
<ul>
<li><a href="#">我的Png</a></li>
<li><a href="#">我的Gif</a></li>
<li><a href="#">我的酷站</a></li>
<li><a href="#">我的日志</a></li>
<li><a href="#">我的相册</a></li>
<li><a href="#">我的收藏</a></li>
</ul>
</li>

<li>我的首页
<ul>
<li><a href="#">我的Png</a></li>
<li><a href="#">我的Gif</a></li>
<li><a href="#">我的酷站</a></li>
<li><a href="#">我的日志</a></li>
<li><a href="#">我的相册</a></li>
<li><a href="#">我的收藏</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>