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

实际效果

使用本代码：

例子中的字体以浏览器默认大小为基准，使用的时候请注意根据整页的设置修改。

本垂直导航条有以下优点：

1. 没有使用图片，所以高度和宽度都可以任意更改。
2. 标注为/*hover的时候改变*/的代码就是这个导航条的核心。

HTML:

<div id="mainNav">
<h2 class="menutitle">Cainiao8.com</h2>
   <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>
   
   ……
</div>

CSS：

#exNav{
   border: 1px solid black;
   border-bottom-width: 0;
   width: 185px;
 }
#exNav ul{
   margin: 0;
   padding: 0;
   width:100%;
   list-style-type: none;
   font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
   }
#exNav ul li{
   display:block;
   margin:0;
   padding:0;
   }
#exNav li a{
   margin:0;
   padding:0;
   display: block;
   height:1.5em;
   line-height:1.5em;
   padding-left:1em;
   text-decoration: none;
   color: white;
   background-color: #2175bc;/*hover的时候改变*/
   border-bottom: 1px solid #90bade;
   border-left: 7px solid #1958b7;/*hover的时候改变*/
   }
#exNav li a:hover {
   background-color: #2586d7;/*hover的时候改变*/
   border-left-color: #1c64d1;/*hover的时候改变*/
   }
#exNav h2.menutitle{
   width:100%;
   margin:0;
   padding:0;
   text-indent:1em;
   color: white;
   border-bottom: 1px solid black;
   background-color: black;
   font: bold 100% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
   }

返回XHTML+CSS导航条教程