|
说明:
嵌套列表是一个很好的方法来描写导航体系.在这个例子我们用了第一个列表来暗示主菜单,而子菜单则包括在主菜单的下面.这样如没有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 （编辑：河北网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
