简单的菜单

通过简单的css 样式 制作简单的菜单：样式如下:

.leftbrand
{
  width:10%;
  height:500px;
  background-color:gray;
  color:yellow;
  text-align:left;
  font-size:12pt;
  vertical-align:top;
  line-height: 30px; /* 设置字体间距*/  
}

.leftbrand li a {
  text-decoration: none;
  padding:5px 5px 5px 3.9em; /*区块显示,padding:上左下右*/
  border-left:12px solid #711515;
  border-right:1px solid #711515;
}

.leftbrand li a:link, .leftbrand li a:visited{
  background-color: #C11136;
  color:#FFFFFF;
}

.leftbrand li a:hover {
  background-color: #990020;
  color:#FFFF00;
}

 

.leftbrand ul li {
 /*background-color:#C11136;*/
  border-bottom: 1px solid #ed9f9f;
}

.leftbrand ul  {
 margin:0px;
 padding:0px;
 list-style-type:none;
}

 

 

页面部分代码:

    <div class="leftbrand">
       <ul>
        <li><a href="#">系统首页</a></li>
        <li><a href="#">分类讨论</a></li>
        <li><a href="#">谈天说地</a></li>
        <li><a href="#">我的信箱</a></li>
        <li><a href="#">休闲娱乐</a></li>
        <li><a href="#">立即注册</a></li>
        <li><a href="#">离开本站</a></li>
    </ul>
       </div>