1.基础的下拉菜单
将鼠标移到元素上时出现的下拉框。效果如下：
代码如下：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.dropdown {position: relative;display: inline-block;}.dropdown-content {display: none;position: absolute;background-color: #f9f9f9;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);padding: 12px 16px;z-index: 1;}.dropdown:hover .dropdown-content {display: block;}</style>
</head><body><h1>可悬停的下拉菜单</h1><p>请把鼠标移到文本上，已查看下拉内容。</p><div class="dropdown"><span>把鼠标移到我上面</span><div class="dropdown-content"><p>Hello World!</p></div></div></body></html>2.下拉式菜单
将鼠标移到元素上时出现的下拉菜单。效果如下：
代码如下：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.dropbtn {background-color: #4CAF50;color: white;padding: 16px;font-size: 16px;border: none;cursor: pointer;}.dropdown {position: relative;display: inline-block;}.dropdown-content {display: none;position: absolute;background-color: #f9f9f9;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);z-index: 1;}.dropdown-content a {color: black;padding: 12px 16px;text-decoration: none;display: block;}.dropdown-content a:hover {background-color: #f1f1f1}.dropdown:hover .dropdown-content {display: block;}.dropdown:hover .dropbtn {background-color: #3e8e41;}</style>
</head><body><h1>下拉菜单</h1><p>请把鼠标移到按钮上，以打开下拉菜单。</p><div class="dropdown"><button class="dropbtn">Dropdown</button><div class="dropdown-content"><a href="#">Link 1</a><a href="#">Link 2</a><a href="#">Link 3</a></div></div></body></html>3.对齐的下拉菜单
下拉菜单左对齐和右对齐，如图所示：
代码如下：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.dropbtn {background-color: #4CAF50;color: white;padding: 16px;font-size: 16px;border: none;cursor: pointer;}.dropdown {position: relative;display: inline-block;}.dropdown-content {display: none;position: absolute;right: 0;background-color: #f9f9f9;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);z-index: 1;}.dropdown-content a {color: black;padding: 12px 16px;text-decoration: none;display: block;}.dropdown-content a:hover {background-color: #f1f1f1;}.dropdown:hover .dropdown-content {display: block;}.dropdown:hover .dropbtn {background-color: #3e8e41;}</style>
</head><body><p>通过 left 和 right 属性，决定下拉内容是左到右还是右到左。</p><div class="dropdown" style="float:left;"><button class="dropbtn">Left</button><div class="dropdown-content" style="left:0;"><a href="#">Link 1</a><a href="#">Link 2</a><a href="#">Link 3</a></div></div><div class="dropdown" style="float:right;"><button class="dropbtn">Right</button><div class="dropdown-content"><a href="#">Link 1</a><a href="#">Link 2</a><a href="#">Link 3</a></div></div>
</body></html>4.下拉图片
鼠标经过显示下拉图片
代码如下：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.dropdown {position: relative;display: inline-block;}.dropdown-content {display: none;position: absolute;background-color: #f9f9f9;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);z-index: 1;}.dropdown:hover .dropdown-content {display: block;}.desc {padding: 15px;text-align: center;}</style>
</head><body><h1>下拉图片</h1><p>请把鼠标移动到图像上，以打开下拉内容。</p><div class="dropdown"><img src="../../bootstrap-4.6.0-dist/img/tp-detail-advantage1.jpg" alt="Coffee" width="100"><div class="dropdown-content"><img src="../../bootstrap-4.6.0-dist/img/tp-detail-advantage1.jpg" alt="Coffee" width="300" height="200"><div class="desc">下拉图片</div></div></div>
</body></html>
5.下拉式导航
在导航栏中添加下拉菜单，效果如下：
代码如下：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #333;}li {float: left;}li a,.dropbtn {display: inline-block;color: white;text-align: center;padding: 14px 16px;text-decoration: none;}li a:hover,.dropdown:hover .dropbtn {background-color: red;}li.dropdown {display: inline-block;}.dropdown-content {display: none;position: absolute;background-color: #f9f9f9;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);z-index: 1;}.dropdown-content a {color: black;padding: 12px 16px;text-decoration: none;display: block;text-align: left;}.dropdown-content a:hover {background-color: #f1f1f1;}.dropdown:hover .dropdown-content {display: block;}</style>
</head><body><ul><li><a href="#home">Home</a></li><li><a href="#news">News</a></li><li class="dropdown"><a href="javascript:void(0)" class="dropbtn">Dropdown</a><div class="dropdown-content"><a href="#">Link 1</a><a href="#">Link 2</a><a href="#">Link 3</a></div></li></ul><p>请悬停到 "Dropdown" 链接上，以查看下拉菜单。</p>
</body></html>
