CSS 垂直导航栏
垂直导航栏
要构建垂直导航栏，<a>除了上一页的代码之外，还可以设置列表内的元素的样式：</a>
示例解释：
display: block;- 将链接显示为块元素使得整个链接区域可点击（而不仅仅是文本），并且允许我们指定宽度（以及填充、边距、高度等，如果您愿意）width: 60px;- 块元素默认占据整个可用宽度。我们希望指定 60 像素的宽度
您还可以设置<ul> ，并删除 的宽度<a>，因为它们在显示为块元素时将占用整个可用宽度。这将产生与我们之前的示例相同的结果：</a>
垂直导航栏示例
创建一个具有灰色背景颜色的基本垂直导航栏，并在用户将鼠标移到链接上时更改链接的背景颜色：
例子
ul {
列表样式类型：无；
边距：0；
填充：0；
宽度：200px；
背景颜色：#f1f1f1；
}
李阿{
显示：块；
颜色：#000；
填充：8px 16px；
文字修饰：无；
}
/* 悬停时更改链接颜色 */
li a:悬停 {
背景颜色：#555；
白颜色;
}
亲自尝试 »
活动/当前导航链接
向当前链接添加“active”类，以便让用户知道他/她在哪个页面上：
中心链接和添加边框
添加 text-align:center 到<li>或<a>将链接置于中心。</a>
添加 border 财产<ul>在导航栏周围添加边框。如果您还想在导航栏内添加边框，请添加border-bottom 致所有人<li>元素，除了最后一个：
全高固定垂直导航栏
创建全高、“粘性”侧面导航：
例子
ul {
列表样式类型：无；
边距：0；
填充：0；
宽度：25%；
背景颜色：#f1f1f1；
高度：100%；/* 全高 */
位置：固定；/* 使其粘住，即使在滚动时也是如此 */
overflow: auto; /* 如果侧边栏内容太多则启用滚动 */
}
亲自尝试 »
笔记： 此示例可能无法在移动设备上正常运行。
