数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用CSS创建垂直菜单？
网页上的垂直菜单主要放置在左侧或右侧。这些左侧或右侧菜单垂直排列，使用户更容易浏览或点击它们。要创建垂直菜单，请设置一个容器，并在其中设置菜单链接。display 属性应设置为 block，以使菜单垂直显示。让我们看看如何使用 HTML 和 CSS 创建垂直菜单。
为菜单设置容器
为菜单设置一个 div。使用带有 href 属性的 <a> 元素添加菜单链接：
<div class="Menu"> <a href="#" class="links selected">About Us</a> <a class="links" href="#">Social Links</a> <a class="links "href="#">Visit Us</a> <a class="links" href="#">More info</a> <a class="links" href="#">Phone Number</a> </div>
设置菜单的宽度
使用 width 属性设置菜单宽度：
.Menu {
width: 200px;
}
垂直对齐菜单
要垂直对齐菜单，请使用值为 block 的 display 属性。此外，要删除菜单链接的下划线，请将 text-decoration 属性设置为 none：
.links {
background-color: rgb(251, 255, 188);
color: black;
display: block;
padding: 12px;
text-decoration: none;
}
链接悬停颜色
当鼠标光标悬停在菜单链接上时，颜色会发生变化。这使用 background-color 属性设置：
.links:hover {
background-color: rgb(85, 85, 85);
color:white;
}
选定的链接
在菜单上，选定的链接应始终具有不同的颜色。使用 background-color 属性设置背景颜色：
.links.selected {
background-color: rgb(0, 0, 0);
color: white;
}
示例
以下是使用 CSS 生成垂直菜单的代码：
<!DOCTYPE html>
<html>
<head>
<style>
.Menu {
width: 200px;
}
.links {
background-color: rgb(251, 255, 188);
color: black;
display: block;
padding: 12px;
text-decoration: none;
}
.links:hover {
background-color: rgb(85, 85, 85);
color:white;
}
.links.selected {
background-color: rgb(0, 0, 0);
color: white;
}
</style>
</head>
<body>
<div class="Menu">
<a href="#" class="links selected">About Us</a>
<a class="links" href="#">Social Links</a>
<a class="links "href="#">Visit Us</a>
<a class="links" href="#">More info</a>
<a class="links" href="#">Phone Number</a>
</div>
</body>
</html>
更新于：2023年12月14日
891 次浏览
广告