導航條（垂直/水平/下拉菜單）

<ul class="nav">
<li><a href="home.html">home</a></li>
<li><a href="about.html">about</a></li>
<li><a href="Service.html">Service</a></li>
<li><a href="Work.html">Work</a></li>
<li><a href="News.html">News</a></li>
<li><a href="contact.html">Contact</a>
    <ul class="contact"><li><a href="">Teleph</a></li>
    <li><a href="">MailTo</a></li>
    <li><a href="">Address</a></li>
    </ul>
</li>
</ul>

1.准備。

導航條的制作，不管是水平還是垂直，首先必須要有結構清晰的html代碼。

常用的一般是無序列表，list標簽中包含<a>標簽；而下拉列表則是在list列表中嵌套一個新的無序列表。

2.css的設定 

//清除自帶格式-取消列表樣式；

//水平導航條需要list浮動，致使其內容不占據空間；

//清除浮動的方法有：a.添加額外的元素，對其設置clear：both；屬性。 b.對父元素設置overflow：hidden屬性。

//背景央樣式、寬度、懸停等格式設置。詳見下面示例代碼。

ul.nav,ul{
    margin:0;
    padding:0;
    width:48em;
    list-style-type:none;
    background:url(img/mainNavBg.gif) repeat-x; 
    overflow:hidden;//清除浮動
}
nav ul{
　　list-style:none;}
ul.nav>li{
　　width:8em;//設置水平導航條選項卡寬度時，在list項下（總和可以和ul的寬度保持一致8*6=48）
　　float:left;}

ul.nav a{
    display:block;
    line-height:1.6em;//利用行高使垂直居中
    padding:0 2em;
    color:#2B3F00;
    text-decoration:none;
    border-left:1px solid #E4ffd3;
    border-right:1px solid #486B02;
    background:url(img/arrow.gif) norepeat 5% 50%;
    }
/*在默認狀態下隱藏下拉菜單*/
ul.nav li ul{
　　width:8em;//寬度和菜單選項卡寬度一致
　　position:absolute;
　　left:-999em;
}
ul.nav a:hover,
ul.nav a:focus{
    color:#E4ffd3;
    background-color:#6da203;}
/*鼠標懸停時顯示*/
ul.nav li:hover ul{
　　left:auto;}