📅 最后修改于: 2023-12-03 15:39:30.706000 🧑 作者: Mango
引导下拉菜单是一种常见的页面导航方式，可以在页面中方便地展示多级菜单及其子菜单。在 HTML 中，可以通过 Bootstrap 框架或手写 CSS 实现下拉菜单。
Bootstrap 是一个流行的前端框架，提供了丰富的 UI 组件和样式，轻松快速地开发出精美的网页。下面是一个简单的 Bootstrap 下拉菜单页面示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css">
<title>Bootstrap 下拉菜单</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
产品
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">产品 1</a>
<a class="dropdown-item" href="#">产品 2</a>
<a class="dropdown-item" href="#">产品 3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">服务</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">博客</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">联系我们</a>
</li>
</ul>
</div>
</nav>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
</body>
</html>
在上述代码中，我们首先引入了 Bootstrap 样式文件和 jQuery、Popper.js、Bootstrap JavaScript 文件。接着，我们创建了一个导航栏组件，其中包含 "Logo"、“首页”、“产品”、“服务”、“博客”、“联系我们” 五个菜单项。菜单项中，“产品”含有三个子菜单项。
除了 Bootstrap 框架，我们也可以手写 CSS 实现下拉菜单。下面是一个简单的手写 CSS 下拉菜单页面示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>手写 CSS 下拉菜单</title>
<style type="text/css">
/* 清除默认样式 */
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
/* 定义菜单样式 */
.nav {
background-color: #f5f5f5;
border: 1px solid #ccc;
display: inline-block;
margin-top: 10px;
padding: 5px 10px;
position: relative;
}
/* 定义菜单项样式 */
.nav li {
display: inline-block;
position: relative;
}
/* 定义子菜单容器样式 */
.sub-nav {
background-color: #fff;
border: 1px solid #ccc;
display: none;
position: absolute;
top: 30px;
z-index: 1;
}
/* 定义子菜单项样式 */
.sub-nav li {
display: block;
}
/* 鼠标悬停时显示子菜单 */
.nav li:hover .sub-nav {
display: block;
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#">首页</a></li>
<li>
<a href="#">产品</a>
<ul class="sub-nav">
<li><a href="#">产品 1</a></li>
<li><a href="#">产品 2</a></li>
<li><a href="#">产品 3</a></li>
</ul>
</li>
<li><a href="#">服务</a></li>
<li><a href="#">博客</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</body>
</html>
在上述代码中，我们手写了简单的 CSS 样式，定义了 ".nav" 菜单容器、".nav li" 菜单项、".sub-nav" 子菜单容器、".sub-nav li" 子菜单项的样式。在菜单项上绑定了鼠标事件，鼠标悬停时显示子菜单。
以上两种方法都是常用的实现下拉菜单的方式，应根据项目需求选择合适的方式。