代码：
<html>
<head>
<style type="text/css">
ul{
float:left;
width:100%;/*ul 元素的宽度是 100%*/
padding:0;
margin:0;
list-style-type:none;/*去除无序列表前面的小点*/
}
a{
float:left;
width:7em;/*列表中的每个超链接的宽度是 7em（当前字体尺寸的 7 倍）*/
text-decoration:none;/*没有文本装饰*/
color:white;
background-color:lightpink;/*光标未在鼠标上时，显示的颜色*/
padding:0.2em 0.6em;
border-right:1px solid white;/*添加颜色和边框，以使其更漂亮。*/
}
a:hover {background-color:gray;}/*光标在标签上时，显示另一种颜色*/
li{display:inline;}
/*把li标签变成行内元素，元素前后没有换行，这样就可以使列表排列成一行。*/
</style>
</head>
<body>
<ul>
<li><a href="#">Link one</a></li><!-- href="#"默认跳转到当前页面 -->
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>
<p>
</p>
</body>
</html>
截图：
竖直菜单栏：