使用CSS开发时髦的导航栏（二）
翻译: 把眉批拖到这里
我能够使用CSS和列表创造有子菜单的导航栏吗？
有时候我们需要超过一级的导航栏 – 可是在CSS里面用样式化的列表能够创建多级导航栏吗？
解决方案
在一个导航系统中显示子菜单最好的办法是在一个列表中创建子列表。这样标记的两级导航栏很容易被理解 – 哪怕浏览器不支持CSS。
为了产生多级导航栏，我们创建一个嵌套的列表，为这些新的列表项样式化颜色、边界和链接属性：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>Lists as navigation</title>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="listnav_sub.css" />
</head>
<body>
<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>
</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。
图4. 包含子菜单的导航栏
讨论
嵌套列表是用来描述我们正在做的导航栏系统的好办法。第一个列表包含站点的主要部分，在Recipes下面的子列表显示了Recipes范围之内的子部分。即使没有任何CSS样式，列表的结构依然清晰且容易理解，就象你在图5看到的一样。
图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元素继承主菜单的样式，子列表将呈现出主导航栏一样的样式。
图6：采用默认样式表子菜单导航栏
为了让嵌套的列表呈现出它是一个子菜单而不是主导航栏一部分的效果，让我们增加一个样式规则：
#navigation ul ul {
margin-left: 12px;
}
这个规则将缩进嵌套列表，让它在主菜单的右边界对齐，象图7显示的这样：
图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;
}
-
Top 100 web2.0网站 最热门的100个网站
视频 *YouTube :YouTube（你的视频）是一个可以让用户免费上传、观赏、分享视频短片的热门视频共享网站 *Meta Cafe: Metacafe （麦塔咖啡厅）-得到最好的网上视频-搞笑...
-
使用CSS开发时髦的导航栏（一）
除非限制你自己只做单个页面的网站，否则你都需要导航栏。事实上，导航栏是任何网站设计中最主要的部分之一，如果希望用户很容易的在你的站点移动，导航栏的设计需要大量的思考。 制作容易的站点导航栏是CSS真...
-
CSS渐变文本效果
你是否想不用photoshop来创建一个带渐变的标题文字吗? 这里用一个简单的css技巧来向你展示如何仅仅使用css和png图片来制造这种效果. 经测试这种方法适合大多数主流浏览器.当然, IE6需...
-
14个可以节省你时间的CSS工具
作为一个网站设计/开发人员，你必须不断寻找方法来减少设计/开发过程中所花费的时间。这对于提高你的工作效率并最大化你的利润是非常重要的。下面介绍的按功能分类的CSS工具可以有效地节省你设计网站的时间。C...
-
2008 Web设计潮流走势
之所以翻译这篇文章，不是让大家欢欣鼓舞的去跟随这些所谓的“潮流走势”，正好相反，我是想提醒大家：小心，这些风格可能马上就要过时了。 当某种风格一旦成为了可以归类的“潮流”，那就意味着，它离过时已...
-
CSS完美分页样式
这个教程要说明的是如何为搜索结果或更常见的长记录列表设计分页。经常有人问我这个问题，所以我决定发一个帖子来说明如何用少量的 HTML 和 CSS 代码设计完美的分页样式。
-
使用CSS开发时髦的导航栏（三）
如何使用CSS和列表构造一个水平菜单？ 到目前为止，我们能够处理垂直导航栏了—这种导航栏在一个中间是主要内容的网站左边或右边很容易被看到。然而，导航栏也常常被做成水平菜单紧挨在文本上方。 解决方案 ...
-
设计者的框架
这是A List Apart上面一篇关于CSS设计框架的文章，初次上yeeyan翻译，包涵包涵，站点还不是很会用。有错误希望指正。
相关小组
-
Web设计
(119译文)
标签:
