Bootstrap实现下拉菜单的效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉菜单</title>
<link rel="stylesheet" href="static/css/bootstrap.min.css">
</head>
<body>
<!--下拉菜单-->
<div class="container">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle " type="button" data-toggle="dropdown">
下拉菜单
<span class="caret"></span><!--添加三角符号-->
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li>
<a href="#" role="menuitem">一</a>
</li>
<li>
<a href="#" role="menuitem">二</a>
</li>
<li>
<a href="#" role="menuitem">三</a>
</li>
<li class="divider"></li><!--设置分割线-->
<li>
<a href="#" role="menuitem">1</a>
</li>
<li class="disabled">
<a href="#" role="menuitem">2</a><!--设置成为不可选-->
</li>
<li>
<a href="#" role="menuitem">3</a>
</li>
</ul>
</div>
</div>
<script src="static/js/jquery-3.5.1.min.js"></script>
<script src="static/js/bootstrap.min.js"></script>
</body>
</html>
实现效果: