用DIV+CSS实现网页顶部菜单效果

相应的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
{
width: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;
width: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
{
width: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
{
width: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;

}

　　运行效果图如下：

 

posted @ 2015-03-29 22:50  阿鼻地狱  阅读(1568)  评论(0)    收藏  举报