水平导航菜单（DIV+CSS）

水平导航菜单（DIV+CSS）

完全用DIV+CSS做的菜单，相比传统用图片做的打开速度更快。预览最终效果>>

#nav{
	height: 44px;
	width: 425px;
	background: #FFFFFF;
}

.vline{
	background: #999999;
	width: 1px;
	height: 20px;
}

#nav ul{
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}

#nav li{
	float: left;
	font-family: Arial;
	font-weight: bold;
	font-size: 12px;
	text-align: center;
}

#nav li a{
	display: block;
	width: 84px;
	line-height: 28px;
	color: #666666;
	text-decoration: none;
	border-top: 4px solid #0F35A5;
}

#nav li a:hover{
	color: #7C8DD9;
	border-top: 4px solid #7C8DD9;
}

<div id="nav"><ul><li><a href="#">产品介绍</a></li><li class="vline"></li>
<li><a href="#">服务支持</a></li><li class="vline"></li>
<li><a href="#">联系我们</a></li><li class="vline"></li>
<li><a href="#">新闻中心</a></li><li class="vline"></li>
<li><a href="#">公司简介</a></li><li class="vline"></li></ul></div>

posted on 2006-12-25 09:52 Steveson 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/Steveson/archive/2006/12/25/602696.html