微軟風格的CSS橫向菜單

2009-06-07　來源/作者：懶人圖庫　分類：導航菜單　 «»

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>水平導航菜單（DIV+CSS）</title>
<style type="text/css">
body{
	background: #FFF;
	font-family: Arial, Helvetica, sans-serif;
	color: #666666;
	padding: 0px;
	margin: 5px;
	text-align: center;	
	font-size: 12px;
}

#nav{
	height: 44px;
	width: 425px;
	background: #FFF;
	margin:10px auto;
	}
.vline{
	background: #999;
	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:  #666;	
	text-decoration: none;
	border-top: 4px solid #0F35A5;
	}
#nav li a:hover{
	color:  #7C8DD9;
	border-top: 4px solid #7C8DD9;	
}
</style>
</head>

<body><div   class="pd7z55t"   id="nav"><ul><li><a href="#">產品介紹</a></li><li id="hvvtrlf"    class="vline"></li>
<li><a href="#">服務支持</a></li><li id="7d5j9x5"    class="vline"></li>
<li><a href="#">聯系我們</a></li><li id="ttdzvlr"    class="vline"></li>
<li><a href="#">新聞中心</a></li><li id="thdzv5j"    class="vline"></li>
<li><a href="#">公司簡介</a></li><li id="3pdp5d5"    class="vline"></li>
</ul></div>
<p>查找更多代碼，請訪問：<a href="http://www.cxj168.com" target="_blank">懶人圖庫</a></p>
</body>
</html>

運行代碼保存代碼提示：您可以先修改部分代碼再運行，保存代碼功能在Firefox下無效。

標簽：導航菜單