数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何使用 CSS 创建子导航菜单？
子导航菜单是指出现在主菜单正下方的菜单。该菜单是使用网页上的 <nav> 元素创建的。可以将其视为辅助菜单或子菜单。子菜单会在鼠标悬停在主菜单中的任何菜单上时显示。这是使用 :hover 选择器设置的。
创建菜单
网页上的菜单是使用 <nav> 元素创建的。对于子菜单，创建一个 div 容器，并使用 <a> 元素设置菜单链接。
<nav>
<a class="links" href="#">Home</a>
<a class="links" href="#">Contact</a>
<a class="links" href="#">About Us</a>
<a class="links" href="#">More Info</a>
<div class="subnav">
<button class="sub-btn">Our Social Media></button>
<div class="sub-content">
<a class="links" href="#">Facebook</a>
<a class="links" href="#">Twitter</a>
<a class="links" href="#">LinkedIn</a>
<a class="links" href="#">Instagram</a>
</div>
</div>
</nav>
设置菜单样式
要设置菜单样式，需要设置 <nav> 的样式。使用 float 属性（值为 left）将链接定位到左侧。text-decoration 属性设置为 none 以删除链接的下划线。
nav {
overflow: hidden;
background-color: rgb(0, 52, 73);
}
nav .links {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
创建子菜单
如上所示，子菜单是在容器内创建的。子菜单链接是使用带有 href 属性的 <a> 元素设置的。
<div class="subnav">
<button class="sub-btn">Our Social Media></button>
<div class="sub-content">
<a class="links" href="#">Facebook</a>
<a class="links" href="#">Twitter</a>
<a class="links" href="#">LinkedIn</a>
<a class="links" href="#">Instagram</a>
</div>
</div>
设置子菜单样式
使用 float 属性（值为 left）将子菜单定位到左侧。
.subnav {
float: left;
overflow: hidden;
}
.subnav .sub-btn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: rgb(0, 109, 67);
margin: 0;
}
定位子菜单内容
实际内容（即子菜单）使用 position 属性设置为 absolute 定位。此类子菜单在页面加载时是不可见的，因此 display 属性设置为 none。子菜单链接使用 float 属性定位到左侧。
.sub-content {
display: none;
position: absolute;
left: 0;
background-color: rgb(0, 156, 83);
width: 100%;
z-index: 1;
}
.sub-content a {
float: left;
color: white;
text-decoration: none;
}
示例
以下是使用 CSS 生成底部带边框（下划线）导航链接的代码：
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
nav {
overflow: hidden;
background-color: rgb(0, 52, 73);
}
nav .links {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.subnav {
float: left;
overflow: hidden;
}
.subnav .sub-btn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: rgb(0, 109, 67);
margin: 0;
}
nav .links:hover,
.subnav:hover .sub-btn {
background-color: rgb(101, 219, 255);
color: black;
font-weight: bolder;
}
.sub-content {
display: none;
position: absolute;
left: 0;
background-color: rgb(0, 156, 83);
width: 100%;
z-index: 1;
}
.sub-content a {
float: left;
color: white;
text-decoration: none;
}
.sub-content a:hover {
background-color: #eee;
color: black;
}
.subnav:hover .sub-content {
display: block;
}
</style>
</head>
<body>
<nav>
<a class="links" href="#">Home</a>
<a class="links" href="#">Contact</a>
<a class="links" href="#">About Us</a>
<a class="links" href="#">More Info</a>
<div class="subnav">
<button class="sub-btn">Our Social Media</button>
<div class="sub-content">
<a class="links" href="#">Facebook</a>
<a class="links" href="#">Twitter</a>
<a class="links" href="#">LinkedIn</a>
<a class="links" href="#">Instagram</a>
</div>
</div>
</nav>
</body>
</html>
更新于：2023年12月14日
浏览量 1K+
广告