<style type="text/css">
#slantedmenu{
font-weight: bold;
font-size: 90%;
}
#slantedmenu:after{ /*在FF中增加菜单末尾的边距*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#slantedmenu ul{
text-indent: 10px;
padding: 3px 0;
margin: 0;
background-color: #e0e0e0;
border: 1px solid #bebebe;
text-align: left; /*可以设置为"center"来居中菜单项*/
}
#slantedmenu ul li{
display: inline;
}
#slantedmenu ul li a{
color: #494949;
padding: 3px 0;
padding-right: 25px;
margin: 0;
text-decoration: none;
background: transparent url(media/slantdivider.gif) top right no-repeat;
}
#slantedmenu ul li a:visited{
color: #494949;
}
#slantedmenu ul li a:hover{
color: black;
}
</style>
<div id="slantedmenu">
<ul>
<li><a href="#">Dynamic Drive</a> </li>
<li><a href="#">CSS Library</a> </li>
<li><a href="#">CSS Drive</a> </li>
<li><a href="#">JavaScript Kit</a> </li>
<li><a href="#">Coding Forums</a> </li>
<li><a href="#">Button Maker</a> </li>
</ul>
</div>
#slantedmenu{
font-weight: bold;
font-size: 90%;
}
#slantedmenu:after{ /*在FF中增加菜单末尾的边距*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#slantedmenu ul{
text-indent: 10px;
padding: 3px 0;
margin: 0;
background-color: #e0e0e0;
border: 1px solid #bebebe;
text-align: left; /*可以设置为"center"来居中菜单项*/
}
#slantedmenu ul li{
display: inline;
}
#slantedmenu ul li a{
color: #494949;
padding: 3px 0;
padding-right: 25px;
margin: 0;
text-decoration: none;
background: transparent url(media/slantdivider.gif) top right no-repeat;
}
#slantedmenu ul li a:visited{
color: #494949;
}
#slantedmenu ul li a:hover{
color: black;
}
</style>
<div id="slantedmenu">
<ul>
<li><a href="#">Dynamic Drive</a> </li>
<li><a href="#">CSS Library</a> </li>
<li><a href="#">CSS Drive</a> </li>
<li><a href="#">JavaScript Kit</a> </li>
<li><a href="#">Coding Forums</a> </li>
<li><a href="#">Button Maker</a> </li>
</ul>
</div>
![slantdivider.gif](http://www.w3pop.com/tech/CSS_LIB/Horizontal-CSS-Menus/media/slantdivider.gif)