CSS垂直导航条2——XHTML+CSS导航条

实际效果

使用本代码

需要一张下面这样的图片。其中左边的图片尽量长。

对比精通CSS中的垂直导航条，本例子有以下优点：

1. 宽度可以改变。而不需要更换图片。
2. 高度不固定。因为是垂直平铺。

HTML:

<ul>
   <li class="first selected"><a href="home.htm">Home</a></li>
   <li><a href="about.htm">About</a></li>
   <li><a href="services.htm">Our Services</a></li>
   <li><a href="work.htm">Our Work</a></li>
   <li><a href="news.htm">News</a></li>
   <li><a href="contact.htm">Contact</a></li>
</ul>

CSS：

注意a:hover的背景position属性的设置为背景图片右半部分的开始位置。

#exNav{
   list-style-type: none;
   margin: 0;
   padding: 0;
   width: 180px; /* width of menu (don't forget to add border with below!) */
   border-left: 8px solid #ffa1a3; /* thick left border of menu */
 }
#exNav li{
   border-bottom: 1px solid #885b5c; /* Gray border beneath each menu item */
   }
#exNav li a{
   background: white url(images/vstrip.gif) repeat-y left top;
 /* Background image positioned to the left(v) top(h) corner initially */
   font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana;
   display: block;
   color: black;
   width: auto;
   border-bottom: 1px solid white; 
/* White border beneath each menu item link, to add depth */
   line-height:2.5em;
   height:2.5em;
   text-indent: 8px;
   text-decoration: none;
   }
#exNav li a:visited, #exNav li a:active{
   color: black;
   }
#exNav li a:hover{
   background-position: -387px 0; 
/* Shift background image horizontally 387px,
 or the start of the 2nd background image */
   color: black;
   }
#exNav li.last, #exNav li.last a{
   border-bottom-width: 0; /* For last menu item within menu,
 remove bottom border */
   }
      

返回XHTML+CSS导航条教程