用CSS开发时尚导航栏第2部分

00-1010在导航系统中显示子菜单的最佳方式是在列表中创建子列表。这个标记的两级导航栏很容易理解——即使浏览器不支持CSS。为了生成多级导航栏，我们创建了一个嵌套列表，并为这些新列表项设置了颜色、边界和链接属性的样式：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN ' ' http://www . w3 . org/TR/XHTML L1/DTD/XHTML L1-Strict . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML ' lang=' EN-US ' head titles as navigation/title meta http-equiv=' content-type ' content=' text/html；charset=utf-8' /link rel='样式表' type=' text/CSS ' href=' list nav _ sub . CSS '//headsdydiv id=' navigation ' ullia href=' # '菜谱/aullia href='# '开胃菜/a/lilia href='# '主菜/a/lilia href='# '甜点/a/li/ul/lilia href='# '联系我们/a/lilia href='# '文章/a/lilia href='} #导航ul { list-style : none；margin : 0；padd : 0；} #导航li {边框-底部： 1px实心# ED9F9F} #导航li a:link，#导航size:访问量{ font-size : 90%；display:块；padd : 0.4 em 0.4 em 0.5 em；边框-左侧： 12px实心# 711515；border-right: 1px实心# 711515；背景-颜色： # B51032；color: # FFFFFF文本装饰：无；} #导航Li a : hover { background-color : # 711515；color: # FFFFFF} #导航ul ul { margin-left : 12px；} #导航ul ul Li { border-bottom : 1px solid # 711515；margin:0} #导航ul ul a:link，#导航ul ul a : visited { background-color : # ED9F；color: # 711515} #导航ul ul a : hover { background-color : # 711515；color: # FFFFFF}添加这些后的显示效果如图4所示。

图4。带有子菜单的导航栏

解决方案

的嵌套列表是描述我们正在做的导航栏系统的好方法。第一个列表包含站点的主要部分，菜谱下的子列表显示菜谱范围内的子部分。即使没有任何CSS样式，列表的结构也清晰易懂，如图5所示。

图5:没有使用样式。在包含子菜单的导航栏下面是我们用来在主项目的li元素中标记这个简单嵌套列表的HTML代码：ullia href=' # ' recipes/aullia href=' # ' starts/a/lilia href=' # ' main courses/a/lilia href=' # '甜品/a/Li/ul/lilia href=' # ' contact us/a/lilia href=' # ' articles/a/lilia href=' # ' online buy/a/Li/ul使用HTML。如果您在本文前面简单地使用CSS而不做任何修改，导航菜单将如图6所示。由于li元素继承了主菜单的样式，子列表将呈现与主导航栏相同的样式。

图6:使用默认样式表子菜单导航栏为了让嵌套列表显示出它是子菜单而不是主导航栏的一部分的效果，我们来添加一个样式规则：# navigationul ul { margin-left : 12px；}此规则将缩进嵌套列表，使其在主菜单的右边缘对齐，如图7所示：。

图7:带有缩进规则的导航栏最后，我们给嵌套表格中的li和A元素添加一些简单的样式来提高效果：# Navigation Ul Ul Li { Border-bottom : 1pxsolid # 711515；margin : 0；} #导航ul ul a:link，#导航ul ul a : visited { background-color : # ED9F；color: # 711515} #导航ul ul a : hover { background-color : # 711515；color: # FFFFFF}