CSS特效七：Hover下拉菜单

老规矩，今天来讲一个很实用的css效果，当鼠标移到按钮的时候就会自动显示下拉菜单。效果如下：

很简单的一个小demo，实现步骤如下：

首先定义一个大的div包裹一个button和一个a链接组
分别设置div下面两个元素的样式。a连接组隐藏起来
设置每部分的hover效果，这里注意

/* .dropdown的hover效果，作用在.dropdown-content上 */.dropdown:hover .dropdown-content {display: block;}

最后附上源码：

<!DOCTYPE html>
<html><head><title>下拉菜单实例</title><meta charset="utf-8"><style>body {margin: auto;}.dropbtn {background-color: #4CAF50;color: #fff;padding: 16px;font-size: 16px;border: none;cursor: pointer;}.dropdown {left: 47%;/* 声明为相对定位，下面的子元素可以参考该元素 */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);}.dropdown-content a {color: black;padding: 12px 16px;text-decoration: none;display: block;}.dropdown-content a:hover {background-color: #f1f1f1}/* .dropdown的hover效果，作用在.dropdown-content上 */.dropdown:hover .dropdown-content {display: block;}.dropdown:hover .dropbtn {background-color: #3dc741;}</style>
</head><body><h2 style="text-align: center;">下拉菜单</h2><p style="text-align: center;">鼠标移动到按钮上打开下拉菜单</p><div class="dropdown"><button class="dropbtn">下拉菜单</button><div class="dropdown-content"><a href="#" target="_block">Hello World 1</a><a href="#" target="_block">Hello World 2</a><a href="#" target="_block">Hello World 3</a></div></div></body></html>

CSS特效七：Hover下拉菜单相关推荐

经典的 div + css 鼠标 hover 下拉菜单
经典的 div + css 鼠标 hover 下拉菜单效果图: 源码: <html><head> <meta charset="utf-8"> ...
html hover效果下拉个框,CSS实现Hover下拉菜单的方法
老规矩,今天来讲一个很实用的css效果,当鼠标移到按钮的时候就会自动显示下拉菜单.效果如下: 很简单的一个小demo,实现步骤如下: 首先定义一个大的div包裹一个button和一个a链接组分别设置d ...
纯CSS实现蓝色圆角下拉菜单
代码简介: 这个菜单没有使用任何的图片,完全是用CSS实现的,包括圆角效果也同样是,而且还考虑了多浏览器的兼容性,可以说非常不错,既兼容性好,又外观漂亮,下拉导航菜单目前比较流行,好好感觉一下本款菜单 ...
html中通过定位实现下拉,JS+CSS相对定位实现的下拉菜单
本文实例讲述了JS+CSS相对定位实现的下拉菜单.分享给大家供大家参考.具体如下: 这里使用的是相对定位,不过效果还可以,用时候再修整一下,这个只是实现了大概功能,还有许多细节没有修饰. 运行效果截图 ...
HTML下拉菜单为什么是灰的,CSS实现的灰色下拉菜单效果代码
本文实例讲述了CSS实现的灰色下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款基于CSS实现的灰色下拉菜单,支持二级的导航菜单,如果不喜欢灰色的话,颜色你自己调整下,完善后效果是相当不错的 ...
CSS设置七彩的下拉菜单
CSS设置七彩的下拉菜单 CSS不仅可以控制下拉菜单的整体字体和边框,而且,可以设置每一个选项的背景色和文字颜色. 首先,建立HTML部分,包括表单.下拉菜单.各个选项和按钮等等. <span ...
css创建鼠标悬停下拉菜单样式
下拉菜单在网站中到处可见. 下面用css设置下拉菜单样式. <!DOCTYPE html> <html> <head> <title>淘宝</ti ...
CSS导航栏及下拉菜单
导航栏对于一个网站来说非常重要,熟练地使用CSS可以转换成好看的导航栏而不是枯燥的HTML菜单.导航栏基本上是一个链接列表,所以使用 <ul></ul>和 <li> ...
html制作好看展开列表框,css实现漂亮的下拉菜单，简单方便实用
本文介绍用css实现的下拉菜单,简单.方便.实用. 为什么推荐用css实现的下拉菜单?因为html默认的 select 控件生成的下拉菜单样式不好控制,不够美观,还有一个致命的缺点,是在IE里 sel ...
html鼠标经过自动下拉菜单,js css鼠标悬停显示下拉菜单
个人信息维护学生信息修改修改密码--%> 修改密码--%> 修改密码--%> 退出登录用户: 所在班级: js文件 //个人信息维护下拉菜单样式 $(function () { ...

CSS特效七：Hover下拉菜单

CSS特效七：Hover下拉菜单相关推荐

最新文章

热门文章