导航条（垂直/水平/下拉菜单）

<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>

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;}