菜单由一组链接组成。用 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