标签：
HTML
<div id="nav"> <ul> <li><a href="#">home</a></li> <li><a href="#">contact us</a></li> <li><a href="#">web</a></li> <li><a href="#">map</a></li> </ul> </div>
CSS
#nav{width:150px; font:"Arial" 14px; text-align:right;} #nav ul{list-style-type:none;margin:0px;padding:0px;} #nav li{border-bottom:1px solid #9f9fed;} #nav li a{display:block;padding:5px 5px 5px 0.5em; text-decoration:none;border-left:12px solid #151571;border-right:1px solid #151571;} #nav li a:link,#nav li a:visited{background:#1136c1;color:#fff;} #nav li a:hover{background:#002099;color:#ff0;border-left:12px solid yellow;}
效果：
鼠标移上效果：
如果想变换成横版的菜单只需改变3处代码：
1.把width:120从#nav移到 #nav li a 中这样，这个列表就没有宽度限制了，并同时保证每个列表项的宽度都是120PX
2.在nav li的样式中增加float：left即可。
3.把#nav的text-align:right改成text-align:center;
效果：
鼠标移上效果：
标签：
原文地址：http://www.cnblogs.com/coldfishdt/p/4630393.html
