css下拉菜单汇总案例

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>

css下拉菜单汇总案例相关推荐

灰色简约三级CSS下拉菜单代码
代码简介: 又一款CSS Menu,银灰色下拉菜单,老外网站扒下来的,兼容性还不错.它最多可以支持三级,如果你的菜单项目很多,你可以自己扩展,一般都是成对出现的标签,分清楚就可以了. 代码内容: &l ...
html中按钮下拉菜单,CSS 下拉菜单
CSS 下拉菜单使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果. 下拉菜单实例实例演示 1 文本下拉菜单菜鸟教程 www.runoob.com 实例演示 2 实例演示 3 学的不仅是技术 ...
兼容FF,IE的纯CSS下拉菜单
代码简介:作者的CSS水平不错啊,值得我们学习,少了JS,就是好看多. 代码内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...
HTML下拉菜单改变颜色,CSS下拉菜单中字体颜色问题
纯CSS下拉菜单演示 *{margin:0;padding:0;} ul{list-style-type:none;} a{text-decoration:none; color:#666; font ...
html列表太多转为下滑菜单,利用CSS过渡属性Transition制作缓缓弹出的纯CSS下拉菜单...
利用CSS过渡属性Transition制作缓缓弹出的纯CSS下拉菜单以往文章里面讲了使用CSS的position属性定位结合display制作下拉弹出菜单,名为<纯CSS制作下拉导航菜单> ...
html下拉框里怎么打出间距,CSS下拉菜单间距
我已经成功创建此导航菜单,但菜单项的间距已关闭.同样在次要名单上,由于其中一项,我不得不让它们变宽.有没有办法让宽度根据最长项目的长度而变化.CSS下拉菜单间距 Menu body { font-fa ...
html下拉菜单原理,HTML5 教程之CSS 下拉菜单
CSS 下拉菜单使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果. 下拉菜单实例实例演示 1 文本下拉菜单实例演示 2 下拉菜单实例演示 3 基本下拉菜单当鼠标移动到指定元素上时,会出 ...
经典的蓝色CSS下拉菜单
<html> <title>经典的蓝色CSS下拉菜单</title> <style> *{margin:0;padding:0;border:0;} # ...
php菜单栏样式,最常见的多个css下拉菜单样式分享
CSS下拉菜单怎么做?在浏览网页的时候我们总会看到各式各样的下拉菜单,那么这些下拉菜单是怎么实现的呢?本篇文章就来给大家分享一下常用的多个CSS下拉菜单的实现方法. CSS下拉菜单的精选文章随便打开 ...

css下拉菜单汇总案例

css下拉菜单汇总案例相关推荐

最新文章

热门文章