css能力:行使CSS做出一个嵌套导航.

说明:
嵌套列表是一个很好的方法来描写导航体系.在这个例子我们用了第一个列表来暗示主菜单,而子菜单则包括在主菜单的下面.这样如没有CSS样式,布局也长短常的清楚.

在主菜单<li>工具包括一个列表:
============================

<div id="navigation"> 
 <ul> 
   <li><a href="#">Recipes</a> 
     <ul> 
       <li><a href="#">Starters</a></li> 
       <li><a href="#">Main Courses</a></li> 
       <li><a href="#">Desserts</a></li> 
     </ul> 
   </li> 
   <li><a href="#">Contact Us</a></li> 
   <li><a href="#">Articles</a></li> 
   <li><a href="#">Buy Online</a></li> 
 </ul> 
</div>

===========================

在html中假如没有添加CSS的话,那么嵌套列表将继承主菜单的CSS样式,靠左边浮动,以是要添加个空缺,与主菜单有必然的间隔.

=========================

#navigation ul ul { 
 margin-left: 12px; 
}

=======================
接下来我们再给嵌套里的<li><a>工具添加样式.

========================
#navigation ul ul li { 
 border-bottom: 1px solid #711515; 
 margin: 0; 
} 
#navigation ul ul a:link, #navigation ul ul a:visited { 
 background-color: #ED9F9F; 
 color: #711515; 
} 
#navigation ul ul a:hover { 
 background-color: #711515; 
 color: #FFFFFF; 
}
=================================

原文：http://www.ximumu.cn/post/177.html

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!