<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
第一次下拉菜单制作
</title>
</head>
<style type="text/css">
*{
margin: 2px;
padding: 2px;
}
li{
list-style: none;
text-align: center;
line-height: 30px;
}
a{
text-decoration: none;
coler: pink;
font-size: 18px;
line-height: 36px;
display: block;
}
.one ul li {
/*width: 120px;*/
float: left;
border: 2px whitesmoke double;
background: #ffd2d2;
}
.one ul li ul{
display: none;
}
.one ul li a:hover{
color: #fff;
background-color: lightpink;
}
.one ul li li:hover ul,.one ul li a:hover ul{
display:block;
width: 120px;
height: 36px;
} /*为什么第二层导航栏出不来?*/
.one ul li ul li{
background: hotpink;
width: 120px;
}
.one ul ul li a:hover{
background: deeppink;
color: hotpink;
}
</style>
<body>
<div class="one">
<ul>
<li><a href="#">首页</a><!-- 导航栏第一层文字链接 -->
<ul>
<li> <a href="#">最新更新</a></li><!-- 导航栏第二层文字链接 -->
<li> <a href="#">下载排行</a></li>
</ul>
</li>
<li><a href="#">企业新闻</a>
<ul>
<li> <a href="#">企业介绍</a></li>
<li> <a href="#">最新动态</a></li>
</ul>
</li>
<li><a href="#">产品信息</a>
<ul>
<li> <a href="#">最新产品</a></li>
<li> <a href="#">产品列表</a></li>
</ul>
</li>
<li><a href="#">特价促销</a>
<ul>
<li> <a href="#">促销</a></li>
<li> <a href="#">最新推荐</a></li>
<li> <a href="#">产品列表</a></li>
</ul>
</li>
<li><a href="#">联系我们</a>
<ul>
<li> <a href="#">公司信息</a></li>
<li> <a href="#">联系我们</a></li>
<li> <a href="#">公司地图</a></li>
</ul>
</li>
<li><a href="#">新手论坛</a>
<ul>
<li><a href="#">你问我答</a></li>
<li><a href="#">网站大学堂</a></li>
<li><a href="#">论坛</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>