61,110
社区成员
发帖
与我相关
我的任务
分享
<html>
<head>
<title>导航菜单</title>
<meta http-equiv='content-type' content='text-html;charset=utf-8'>
<style type='text/css'>
body{
font-family:'微软雅黑';
font-size:14px;
margin:0px;
padding:0px;
}
#nav{
width:100%;
height:200px;
background:purple;
}
#nav ul li{
list-style-type:none;
font-weight:bold;
width:100px;
height:40px;
text-align:center;
line-height:40px;
float:left;
}
#nav ul li:hover ul
{
display:block;
}
a{
color:white;
text-decoration:none;
font-size:20px;
}
a:hover{
color:red;
}
#nav ul li ul
{
display:none;
position:relative;
top:0;
left:-40px;
}
</style>
</head>
<body>
<div id='nav'>
<ul>
<li><a href='#'>首页</a></li>
<li><a href='#'>相册</a>
<ul>
<li><a href="#">同学</a></li>
<li><a href="#">同事</a></li>
<li><a href="#">家人</a></li>
<li><a href="#">私密</a></li>
</ul>
</li>
<li><a href='#'>博客</a></li>
<li><a href='#'>好友</a></li>
<li><a href='#'>收藏</a></li>
<li><a href='#'>留言</a></li>
<li><a href='#'>关于我们</a></li>
</ul>
</div>
</body>
</html>
这个是在你的代码上改的,不知道是不是你想要的结果。我的博客里有一个3级菜单导航的例子,有兴趣可以看看。