使用CSS开发时髦的导航栏（二）

秒速五厘米 2022-09-20 06:05 40阅读 0赞

原作者: [Rachel Andrew][]   ![div.gif][]  译者: [子非鱼][Link 1] [![2930.jpg_1][]][Link 1] ( [Blog][])   ![div.gif][]  发表时间：昨天 10:40:17   ![div.gif][]  [原文链接][Rachel Andrew]

**删除**:  
把眉批拖到这里 ![trash.jpg][]

[添加眉批][Link 2]  
[隐藏眉批][Link 3]

[显示眉批(0)][Link 3]

**我能够使用CSS和列表创造有子菜单的导航栏吗？**

有时候我们需要超过一级的导航栏 – 可是在 CSS里面用样式化的列表能够创建多级导航栏吗？

**解决方案**

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

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

<head>

<title>Lists as navigation</title>

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

</head>

<body>

<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>

</body>

</html>

\#navigation \{

width: 200px;

\#navigation ul \{

list-style: none;

margin: 0;

padding: 0;

\#navigation li \{

border-bottom: 1px solid \#ED9F9F;

\#navigation li a:link, \#navigation li a:visited \{

font-size: 90%;

display: block;

padding: 0.4em 0 0.4em 0.5em;

border-left: 12px solid \#711515;

border-right: 1px solid \#711515;

background-color: \#B51032;

color: \#FFFFFF;

text-decoration: none;

\#navigation li a:hover \{

background-color: \#711515;

color: \#FFFFFF;

\#navigation ul ul \{

margin-left: 12px;

\#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;

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

![navigation\_css-list-subnav.png][navigation_css-list-subnav.png]

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

**讨论**

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

![navigation\_sense-without-css.png][navigation_sense-without-css.png]

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

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

<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>

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

![navigation\_sublist-mainnav-styles.png][navigation_sublist-mainnav-styles.png]

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

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

\#navigation ul ul \{

margin-left: 12px;

这个规则将缩进嵌套列表，让它在主菜单的右边界对齐，象图 7显示的这样：

![navigation\_indent-subnav.png][navigation_indent-subnav.png]

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

最后让我们给嵌套表里面的 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;

[Rachel Andrew]: http://www.sitepoint.com/article/navigation-using-css#
[div.gif]: http://www.yeeyan.com/img/div.gif
[Link 1]: http://www.yeeyan.com/space/show/2930
[2930.jpg_1]: http://www.yeeyan.com/icon/2930.jpg?1
[Blog]: http://blog.networkcode.cn/
[trash.jpg]: http://www.yeeyan.com/img/trash.jpg
[Link 2]: http://www.yeeyan.com/articles/inlinecomment/2930/2035
[Link 3]: http://www.yeeyan.com/articles/view/2930/2035#
[navigation_css-list-subnav.png]: /images/20220828/1ebf18bb8fac468b93ebdb0b515c41bd.png
[navigation_sense-without-css.png]: /images/20220828/d5b808887be24028bb286fbfbb4c2c73.png
[navigation_sublist-mainnav-styles.png]: /images/20220828/d93a5c7b908a4191a4a1d6621993a7ad.png
[navigation_indent-subnav.png]: /images/20220828/e6dbbfd27b834fafaa237e272e764f28.png