CSS를 사용하여 스타일리쉬한 네비게이션 바 개발하기 2부_경험 교환

解决方案

在一个导航系统中显示子菜单最好的办法是在一个列表中创建子列表。这样标记的两级导航栏很容易被理解 – 哪怕浏览器不支持CSS。

为了产生多级导航栏，我们创建一个嵌套的列表，为这些新的列表项样式化颜色、边界和链接属性：

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

content="text/html; charset=utf-8" />

• Recipes

  • Starters
  • Main Courses
  • Desserts

• Contact Us
• Articles
• Buy Online

#navigation {

宽度：200px；

}

#navigation ul {

列表样式：无；

边距：0；

填充：0；

}

#navigation li {

边框底部：1px实线#ED9F9F;

}

#navigation li a:链接，#navigation li a:访问过{

字体大小：90%；

显示：块；

填充：0.4em 0 0.4em 0.5em;

左边框：12px 实线#711515;

右边框：1px实体#711515;

背景颜色：#B51032；

颜色：#FFFFFF；

文本装饰：无；

}

#navigation li a:hover {

背景颜色：#711515;

颜色：#FFFFFF；

}

#navigation ul ul {

左边距：12px;

}

#navigation ul ul li {

边框底部：1px实体#711515;

边距：0;

}

#navigation ul ul a:链接，#navigation ul ul a:访问过{

背景颜色：#ED9F9F;

颜色：#711515；

}

#navigation ul ul a:hover {

背景颜色：#711515;

颜色：#FFFFFF；

}

 

增加这些以后的显示效果图4。

图4。 包含子菜单的导航栏

讨论

前台列表是用来描述我们正在做的导航栏系统的好方法。第一个列表包含站点的主要部分，在菜谱下面的子列表显示了菜谱范围之内的子部分。即使没有任何CSS样式，列表的结构依然清晰且容易理解，就象你在图 5看到的一样。

图5：没有使用样式，包含子菜单的导航栏

下面是我们用来主要项目的li元素里面标记这个简单的雕塑列表的HTML代码：

• 食谱

  • 入门
  • 主要课程
  • 甜点

• 联系我们
• 文章
• 在线购买

用HTML，如果简单的使用前面的CSS，不做任何修改的话，导航菜单的显示将下面6。由于li元素继承了主菜单的样式，子列表将呈现出与主导航栏相同的样式。

图6：采用默认样式表子菜单导航栏

为了让前台的列表呈现出它是一个子菜单而不是主导航栏部分的效果，让我们增加一个样式规则：

#navigation ul ul {

左边距：12px;

}

此规则将缩进书签列表，使在主菜单的右边界对齐，象图7显示的这样：

图7：带有缩进规则的导航栏

最后让我们给舞蹈表里面的li和a元素增加一些简单的样式以便完善效果：

#navigation ul ul li {

边框底部：1px实体#711515;

边距：0；

}

#navigation ul ul a:链接，#navigation ul ul a:访问过{

背景颜色：#ED9F9F;

颜色：#711515；

}

#navigation ul ul a:hover {

背景颜色：#711515;

颜色：#FFFFFF；

}