关于网站下拉导航的设置

网站的导航很多都是下拉的方式，如下图所示：



就是一种下拉菜单，导航的数据是以ul、li相互嵌套的方式存在的。

------------------------------------------
<div class="head">
<div class="logo"></div>
<div  id="navigation">
<ul>
<li class="mr70px"><a href="#" id="current">HOME</a></li>
<li class="mr70px"><a href="#">ABOUT US</a>
<ul>
<li><a href="#">Careers</a></li>
</ul>
</li>
<li class="mr70px"><a href="#">PRACTICE AREAS</a>
<ul >
<li><a href="#">State Income & Franchise Tax</a></li>
<li><a href="#">Sales & Use Tax</a></li>
<li><a href="#">Other Indirect Taxes</a></li>
</ul>
</li>
<li class="mr70px"><a href="#">NEWS & EVENTS</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
-----------------------

如上面代码所示，head的div层里包含logo和navigation两个div层。

导航就是主要通过navigation的div层来实现。

最外面的一层ul、li就对应着导航的主要链接，比如Home、About Us，About Us下面又有子菜单，也就是在li下面添加新的ul、li，可以添加多个li项，也就意味着有多个子菜单，下面的类似，PRACTICE AREAS下面也有虚影的子菜单。

这是html部分，接下来要做的就是通过css样式来设计下拉导航的效果。

css可以操作所有的ul、li。

ul li {
list-style:none;
}

#navigation {
float:right;
/*width:715px;*/
margin-top:0px;
}
#navigation ul li {
float:left;
font-size:14px;
font-weight:bold;
color:#666666;
}
#navigation ul li a {
color:#086574;
display:block;
}
#navigation ul li a:hover, #navigation ul li a#current {
color:#944243;
}
#navigation li ul {
/*核心内容*/
line-height: 27px;
text-align:left;
left:999em;
width:210px;
position: absolute;
z-index:2;
}
#navigation li ul li {
width:210px;
background:#fff;
}
#navigation li ul a {
display: block;
width:200px;
text-align:left;
padding-left:10px;
font-size:12px;
background: none;
}
#navigation li ul a:hover {
color:#F3F3F3;
background:#04505D;

}
#navigation li:hover ul {
left: auto;
}

先布好大局，定下navigation的位置，然后再逐步调整，ul、li的位置。

以及鼠标悬乎上去后的效果。

说实话，绝对定位与相对定位至今不是很明白。就到这里吧，我也说不清楚。