相应的html代码：
<html> <head> <link href="3.css" type="text/css" rel="stylesheet"> </head> <body> <div class="div1"> <ul> <li><a href="#" style="text-align:center;">首页</li> <li> <a href="#" style="text-align:center;"> 新闻中心 <div class="div2"> <ul> <li><a href="#">我是新闻</li> <li><a href="#">我是新闻</li> <li><a href="#">我是新闻</li> <li><a href="#">我是新闻</li> </ul> </div> </li> <li><a href="#" style="text-align:center;">产品展示</li> <li><a href="#" style="text-align:center;">人才招聘</li> <li><a href="#" style="text-align:center;">联系我们</li> </ul> </div> </body> </html>
其中对应的样式封装到一个css文件中：
*{
margin:0px;
padding:0px;
}
.div1
{
530px;
height:30px;
background-color:pink;
margin:0 auto;
}
.div1 ul
{
list-style-type :none;
float:left;
}
.div1 ul li
{
float:left;
margin-left:0px;
105px;
}
.div1 ul li a
{
text-decoration:none;
line-height:30px;
display:block;
padding-left:0px;
border-left:1px solid white;
}
.div1 ul li a:hover
{
background-color:red;
}
.div2
{
105px;
height:120px;
background-color:pink;
position:absolute;
left:524px;
top:30px;
display:none;
}
.div2 ul
{
list-style-type :none;
float:left;
}
.div2 ul li a
{
85px;
text-decoration:none;
line-height:29px;
display:block;
padding-left:20px;
border-top:1px solid white;
}
.div1 ul li:hover .div2
{
display:block;
}
.div2 ul li a:hover
{
background-color:green;
}
运行效果图如下：
