html带子菜单的纵向导航栏 CSS学习笔记(九) 界面组件之导航菜单

菜单由一组链接组成。用 HTML 中的列表元素(ul 或 ol)来分组链接不仅符合逻辑，而且即使没有额外的 CSS 也能适当显示链接的层次。默认情况下，由于列表(li)是块级元素，因此它们会上下堆叠。

1.纵向菜单

html 标记：

applebananacatdog

css 规则：

*{

margin: 0;

padding: 0;

}

nav{

margin: 50px;width:150px;

}

.list ul{

border: 1px solid #6a6b6c;

border-radius: 3px;

padding:5px 10px 3px;

}

.list li{

list-style: none;

/*padding: 3px 10px;*/

}

.list li + li a{ /* 注意这里！ */

border-top: 1px solid #6a6b6c;

}

.list a{

display: block; /* 这里！ */

padding:3px 10px; /* 还有这里！ */

text-decoration: none;

padding: 3px 10px;

}

.list a:hover{

color:#069;

}

效果图：

说明：

相对于 div，使用 HTML5 新增的 nav 元素作为导航菜单的容器在语义上更恰当。

使用 非首位子元素 选择符。li + li选择符意思为：任何跟在 li 之后的 li。在上面表示给除第一个 li 之外的所有列表项上方加一条边框。这种选择符就称为 非首位子元素选择符。它在选择列表时非常使用。其它实现该效果的方法：

/*给所有 li 上方添加一条边框*/

li {

border-top:1px solid #f00;

}

/*去掉第一个 li 上方的边框*/

li:first-child {

border-top:none;

}

让列表可点击。为了不让只有文本可以点击(因为链接 a 是行内元素，它会收缩并包住其中的文本。)，为了提高用户体验，我们需要 让列表项所在的整行都能点击。方法就是首先把内边距从 li 元素转移到链接内部，然后让链接完全填满整个列表项。如下所示：

.list a{

displ