网站的导航很多都是下拉的方式,如下图所示:
就是一种下拉菜单,导航的数据是以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的位置。
以及鼠标悬乎上去后的效果。
说实话,绝对定位与相对定位至今不是很明白。就到这里吧,我也说不清楚。
本文转自TBHacker博客园博客,原文链接:http://www.cnblogs.com/jiqing9006/archive/2012/07/26/2610466.html,如需转载请自行联系原作者