用纯css实现下拉菜单的几种方式
第一种:display:none和display:block切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul{
list-style: none;
}
.nav>li{
float: left;
}
ul a{
display: block;
text-decoration: none;
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
color: white;
background-color: #2f3e45;
}
.nav>li:first-child a{
border-radius: 10px 0 0 10px;
}
.nav>li:last-child a{
border-radius: 0 10px 10px 0;
}
.drop-down{
/*position: relative;*/
}
.drop-down-content{
padding: 0;
display: none;
/*position: absolute;*/
} h3{
font-size: 30px;
clear: both;
}
.drop-down-content li:hover a{
background-color:red;
}
.nav .drop-down:hover .drop-down-content{
display: block;
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#">下拉菜单</a></li>
<li class="drop-down"><a href="#">下拉菜单</a>
<ul class="drop-down-content">
<li><a href="#">我是1</a></li>
<li><a href="#">我是2</a></li>
<li><a href="#">我是3</a></li>
</ul>
</li>
<li><a href="#">下拉菜单</a></li>
<li><a href="#">下拉菜单</a></li>
<li><a href="#">下拉菜单</a></li>
</ul>
<h3>我是测试文字</h3>
</body>
</html>
这是首先考虑到的实现方法，给 .drop-down-content 添加display:none，当悬浮在.drop-down上时 .drop-down-content的display变成block，缺点是不能添加过渡属性，慢慢弹出下来菜单。当.drop-down-content显示时会把后面的盒子往下挤，因为.drop-down-content 显示时是存在于文档流中的，给.drop-down设置position:relative，.drop-down-content设置position:absolute，使下拉菜单脱离了文档流来解决，上面注释的地方改过来即可
第二种方法:给悬浮的这个li设置一个固定高度，然后设置超出部分隐藏，悬浮时显示。
<style>
ul{
list-style: none;
}
.nav>li{
float: left;
}
ul a{
display: block;
text-decoration: none;
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
color: white;
background-color: #2f3e45;
}
.nav>li:first-child a{
border-radius: 10px 0 0 10px;
}
.nav>li:last-child a{
border-radius: 0 10px 10px 0;
}
.drop-down{
/*position: relative;*/
height: 50px;
overflow: hidden;
}
.drop-down-content{
padding:;
/*position: absolute;*/
} h3{
font-size: 30px;
clear: both;
/* position: relative;
z-index: -1;*/
}
.drop-down-content li:hover a{
background-color:red;
}
.nav .drop-down:hover{
overflow: visible;
}
</style>
有个问题：h3段落里面的文字会从下拉菜单中透过来，并且鼠标放在字上面的时候下拉菜单会缩回。
解决方式有两种：1.给.drop-down设置position:relative，.drop-down-content设置position:absolute。
2.给h3设置position:relative;z-index:-1。
第三种方法：给下拉菜单设置固定的高度，下拉菜单的内容设置透明opacity: 0;，悬浮在下拉菜单时opacity: 1;来实现
<style>
ul{
list-style: none;
}
.nav>li{
float: left;
}
ul a{
display: block;
text-decoration: none;
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
color: white;
background-color: #2f3e45;
}
.nav>li:first-child a{
border-radius: 10px 0 0 10px;
}
.nav>li:last-child a{
border-radius: 0 10px 10px 0;
}
.drop-down{
/*position: relative;*/
height: 50px;
}
.drop-down-content{
padding:;
opacity:;
/*position: absolute;*/
} h3{
font-size: 30px;
clear: both;
/* position: relative;
z-index: -1;*/
}
.drop-down-content li:hover a{
background-color:red;
}
.nav .drop-down:hover .drop-down-content{
opacity:;
}
</style>
效果同上。
上面的几种方法都是不能添加过渡效果的，鼠标滑过时下拉菜单就马上弹出来了，用户体验不是很好，下面这种方法可以添加过渡的效果来实现一定时间内来弹出
方法四：将下拉菜单的ul高度设置为0，并且超出部分隐藏掉。
<style>
ul{
list-style: none;
}
.nav>li{
float: left;
}
ul a{
display: block;
text-decoration: none;
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
color: white;
background-color: #2f3e45;
}
.nav>li:first-child a{
border-radius: 10px 0 0 10px;
}
.nav>li:last-child a{
border-radius: 0 10px 10px 0;
}
.drop-down{
/*position: relative;*/
height: 50px;
}
.drop-down-content{
padding:;
opacity: 0.3;
height:;
overflow: hidden;
transition: all 1s ease;
/*position: absolute;*/
} h3{
font-size: 30px;
clear: both;
/* position: relative;
z-index: -1;*/
}
.drop-down-content li:hover a{
background-color:red;
}
.nav .drop-down:hover .drop-down-content{
opacity:;
height: 150px;
}
也会出现上面同样的问题，两种解决方式，把上面代码中注释的地方改过来即可。
做这个demo时我碰到误区，以为把下拉菜单ul值设置为0，下拉菜单整体会隐藏掉，实际上是ul的高度变为了0，但是里面的内容并没有变化，觉得跟做导航时浮动li，ul的高度变成了0，li还能显示一样。一定要给ul设置overflow:hidden，整个下拉菜单才会隐藏。顺带提一句：我们做导航条的时候一般都是左浮动li标签，ul的高度就变成了0，然后给ul设置overflow:hidden，ul就会有高度了，包裹了li标签，后面的盒子会正常布局。
方法五：设置包裹下拉菜单的li元素position:relation;下拉菜单绝对定位，left：-999px;使下拉菜单跑到左边浏览器外面看不到的地方，悬浮时，left:0;使其出现在浏览器中显示。
<style>
ul{
list-style: none;
}
.nav>li{
float: left;
}
ul a{
display: block;
text-decoration: none;
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
color: white;
background-color: #2f3e45;
}
.nav>li:first-child a{
border-radius: 10px 0 0 10px;
}
.nav>li:last-child a{
border-radius: 0 10px 10px 0;
}
.drop-down{
position: relative;
}
.drop-down-content{
padding:;
position: absolute;
left: -999px;
}
h3{
font-size: 30px;
clear: both;
}
.drop-down-content li:hover a{
background-color:red;
}
.nav .drop-down:hover .drop-down-content{
left:;
}
</style>
后来又意淫了一种方法，把下拉菜单的背景色和字体色改为透明色，然后后悬浮在li上时，颜色变回来。然而发现并没有什么卵用，虽然眼睛看不到，但是鼠标已过去时变成了小手，就暴露啦，哈哈。
用纯css实现下拉菜单的几种方式的更多相关文章
- 纯css实现下拉菜单
今天给大家分享一个纯html+css实现的下拉菜单.在此声明一点,源码并非出自本人之手,是同项目组一兄弟PLUTO写的.好东西嘛,所以果断拿出来和大家分享.如果有更好的想法或者建议,一定记得留言哦!好 ...
- 纯CSS实现下拉菜单及下拉容器等（纯CSS实现导航条及导航下拉容器）
虽然网上类似甚至相同的案例有很多,但是我还是写下,以记下笔记,也可供大家参考 希望大家可以指导批评~~ 首先我们以列表ul li 来开始我们菜单也可以说导航条的制作: 在页面中我们首先构建以下XHTM ...
- CSS实现下拉菜单的几种方法
PS:转自https://www.cnblogs.com/yewenxiang/p/6064117.html 第一种:display:none和display:block切换 1 <!DOCTY ...
- Html5+Css3制作下拉菜单的三种方式
一.渐变式改变ol的高度 1.外部为ul标签,在每个li里嵌套一个ol列表2.设置外部li左浮动,内部ol标签绝对定位,外部li标签相对定位3.设置ol的高为0,溢出隐藏4.外部li标签:hover ...
- CSS+JS下拉菜单和纯CSS下拉菜单
下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...
- 纯css3圆角下拉菜单 都没敢用js
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- HTML+CSS写下拉菜单
今天学习了使用HTML+CSS实现下拉菜单效果,在这个例子中,我学到了如下知识点: 设置背景图片(background-image.background-size) 如何让无序列表横向显示(float ...
- CSS的下拉菜单被挡住，修改Z-INDEX也不成功
CSS的下拉菜单被挡住,修改Z-INDEX也不成功 做了一个鼠标放上去就出现的下拉菜单,但是这个下拉的内容被挡住了. Z-INDEX 是设置不同块的层次的,我修改了问题还是有. 后来发现是必须要把该便 ...
- 纯洁CSS实现下拉菜单和下拉容器（纯洁CSS导航栏和导航下拉容器）
虽然网上课程似即使案件大同小异,但我还是写,记笔记,也为您提供参考 我希望你能指导批评~~ 首先,我们必须列出ul li 开始我们的导航栏菜单也能说生产: 在下面的页面,我们先建XHTML结构体: & ...
随机推荐
- MySQL------如何关闭打开MySQL
1.win+R打开运行窗口,输入services.msc 2.在其中查看mysql的服务名,我的是MySQL57 3.以管理员身份打开cmd 停止: 输入net stop MySQL57 启动: 输入 ...
- 假设数组a有n个元素，元素取值范围是1~n，如何判定数组是否存在重复元素
方法一:位图法,原理是首先申请一个长度为n且均为’0’组成的字符串,字符串的下标即为数组a[]中的元素,然后从头开始遍历数组a[N],取每个数组元素的值,将其对应的字符串中的对应位置置1,如果已经置过 ...
- DBA操作
sqlplus sys/tiger as sysdba; alter user scott account unlock; 用户已更改 切换用户:conn scott/tiger as sysdba ...
- 5 -- Hibernate的基本用法 --4 4 数据库方言
Hibernate底层依然使用SQL语句来执行数据库操作,虽然所有关系数据库都支持使用标准SQL语句,但所有数据库都对标准SQL进行了一些扩展,所以在语法细节上存在一些差异.因此,Hibernate需 ...
- Git Step by Step – (5) Git分支(branch)
在前面两盘文章中介绍了Git的基本原理,都是理论知识.这篇文章我们再次回到实践中,看看Git分支(branch)的使用. 在代码版本控制工具中,都会有branch的概念.刚开始建立版本仓库的时候,我们 ...
- SaltStack salt-run 命令
salt-run 常见用法如下: salt-run manage.up # 查看在线的minion salt-run manage.down # 查看不在线的minion salt-run manag ...
- Linux命令之乐--wget
常见参数: 参数 作用 -b 后台下载模式. -P 下载到指定目录. -t 最大尝试次数. -c 断点续传 -p 下载页面内所有资源,包括图片.视频等. -r 递归下载 实例1,下载本站的所有文章 ...
- N76E003之IIC
I2C 总线提供了一种串行通信方式,用在 MCU 与 EEPROM,LCD模块,温度传感器等等之间控制.I2C 用两条线 (数据线SDA 和时钟线 SCL) 在设备间传输数据.I2C 总线用作主机与从 ...
- Cent OS 常用命令搜集
打开一个 Shadowsocks 配置文件nano /etc/shadowsocks.json 重启 Shadowsocks/etc/init.d/shadowsocks restart centos ...
- Ubuntu apt-get彻底卸载软件包
https://blog.csdn.net/get_set/article/details/51276609 如果你关注搜索到这篇文章,那么我可以合理怀疑你被apt-get的几个卸载命令有点搞晕了. ...