共有三种可悬停的下拉内容：下拉文本，下拉菜单，下拉式图像
一.下拉文本
当用户鼠标悬停到指定文本时，会出现的文本下拉框，下面是效果图：
HTML
<body><div class="wai"><span>把鼠标移到我上面</span><div class="xiala"><p>Hello World!</p></div></div>
</body>CSS
<style>.wai {position: relative;display: inline-block;}.xiala {display: none;position: absolute;background-color: #f9f9f9;min-width: 100%;box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);padding: 12px 16px;z-index: 1;}.wai:hover .xiala {display: block;}
</style>HTML中：打开下拉菜单的元素可以是任何元素，将下拉菜单内容放在一个div中，将这两个元素放在一个整体的div中
CSS中：外层div需要设置position: relative;，当我们想要设置下拉内容出现位置时，需要用到；内层下拉内容div，一般情况下，利用display: none;可以将它隐藏起来的，box-shadow可以让下拉内容看起来更加立体
二.下拉菜单
与下拉文本不同的是，下拉菜单可以点击下拉菜单中内容，跳转到相应页面，效果图：
HTML
<body><h1>下拉菜单</h1><p>请把鼠标移到按钮上，以打开下拉菜单。</p><div class="wai"><button class="anniu">Dropdown</button><div class="xiala"><a href="# ">Link 1</a><a href="# ">Link 2</a><a href="# ">Link 3</a></div></div>
</body>css
<style>/* 设置下拉按钮样式 */.anniu {background-color: #4caf50;color: white;padding: 16px;font-size: 16px;border: none;}/* 外层容器存放下拉内容和下拉按钮 */.wai {position: relative;display: inline-block;}/* 下拉内容 */.xiala {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;}/* 下拉菜单中链接 */.xiala a {color: black;padding: 12px 16px;text-decoration: none;display: block;}/* 在链接处悬停时的样式 */.xiala a:hover {background-color: #f1f1f1;}/* 鼠标悬停在下拉按钮处，显示下拉菜单 */.wai:hover .xiala {display: block;}/* 显示下拉菜单时，下拉按钮更改颜色 */.wai:hover .anniu {background-color: #3e8e41;}
</style>如果想控制下拉菜单内容向左对齐还是向右对齐，可以在最外层div标签中设置float属性，设置right: 0;或者left: 0;
三.下拉式图像
HTML
<body><div class="wai"><img src="image/dog.jpg" alt="dog" width="100"><div class="xiala"><img src="image/dog.jpg" alt="dog" width="300"><div class="tishi">dog</div></div></div>
</body>CSS
<style>.wai {position: relative;display: inline-block;}.xiala {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;}.wai:hover .xiala {display: block;}.tishi {padding: 15px;text-align: center;}
</style>
