虚线效果水平CSS菜单

演示效果截图

用到的图片

CSS代码

<style type="text/css">
<!--
body {margin:0;padding:0;font-family: verdana, sans-serif;
font-size: 11px;background: #f7f7f7;}
.container { 650px;height:200px;padding:20px;
border:1px solid #ccc;background: #fff;}
#roscripts_m4 {margin: 0;padding: 0 0 22px 0;}
#roscripts_m4 li {margin: 0;padding: 0;display: inline;
list-style-type: none;}
#roscripts_m4 a:link, #roscripts_m4 a:visited {float: left;font-size: 10px;
line-height: 16px;font-weight: bold;padding: 6px 22px 6px 22px;
text-decoration: none;color: #708491;border-left:1px solid #9FB1BC;
border-bottom: 1px solid #9FB1BC;}
#roscripts_m4 a:link.active, #roscripts_m4 a:visited.active, 
#roscripts_m4 a:hover {padding-bottom: 6px;color: #000;background: url(m4.gif);}
-->
</style>

HTML代码

<div class="container">
<ul id="roscripts_m4">
<li><a href="http://www.865171.cn">Home</a></li>
<li><a href="http://www.865171.cn">Products</a></li>
<li><a href="http://www.865171.cn">Services</a></li>
<li><a class="active" href="http://www.865171.cn">www.865171.cn</a></li>
</ul>
</div>