橘黄色的虚线边框CSS垂直菜单代码

时间：2011-03-05 来源：网页代码站

个款竖向垂直布局的CSS菜单，不同的是它的菜单项之间用虚线间隔，我们来看它是怎么实现的。它同样是用UL、LI列表打造的菜单，只不过设置菜单的的下边框border的属性为 dashed ，也就是虚线，其实方法非常简单，你可以对照CSS手册，查一下border属性的边框取值，这只是其中之一。

代码内容：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>橘黄色的虚线边框CSS垂直菜单代码_网页代码站(www.webdm.cn)</title>
<style type="text/css">
#vertmenu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
width: 160px;
padding: 0px;
margin: 0px;
}

#vertmenu h1 {
display: block; 
background-color:#FF9900;
font-size: 90%; 
padding: 3px 0 5px 3px;
border: 1px solid #000000;
color: #333333;
margin: 0px;
width:159px;
}

#vertmenu ul {
list-style: none;
margin: 0px;
padding: 0px;
border: none;
}
#vertmenu ul li {
margin: 0px;
padding: 0px;
}
#vertmenu ul li a {
font-size: 80%;
display: block;
border-bottom: 1px dashed #C39C4E;
padding: 5px 0px 2px 4px;
text-decoration: none;
color: #666666;
width:160px;
}

#vertmenu ul li a:hover, #vertmenu ul li a:focus {
color: #000000;
background-color: #eeeeee;
}

</style>
</head> 
<body>
<div id="vertmenu"> 
<h1>垂直的菜单</h1>
<ul>
<li><a href="http://www.webdm.cn" tabindex="1">网页代码站</a></li>
<li><a href="http://www.cnblogs.com/" tabindex="2">About Us</a></li>
<li><a href="http://www.cnblogs.com/" tabindex="3">WebDm.cn</a></li>
<li><a href="http://www.webdm.cn" tabindex="4">网页特效</a></li>
<li><a href="http://www.cnblogs.com/" tabindex="5">Games</a></li>
<li><a href="http://www.cnblogs.com/" tabindex="6">友情链接</a></li>
</ul>
</div>
</body>
</html>
<br>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</p>

代码来自：http://www.webdm.cn/webcode/8852a9ae-b730-46c4-bef8-9206a064972e.html