第一种: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实现下拉菜单的几种方式的更多相关文章

  1. 纯css实现下拉菜单

    今天给大家分享一个纯html+css实现的下拉菜单.在此声明一点,源码并非出自本人之手,是同项目组一兄弟PLUTO写的.好东西嘛,所以果断拿出来和大家分享.如果有更好的想法或者建议,一定记得留言哦!好 ...

  2. 纯CSS实现下拉菜单及下拉容器等(纯CSS实现导航条及导航下拉容器)

    虽然网上类似甚至相同的案例有很多,但是我还是写下,以记下笔记,也可供大家参考 希望大家可以指导批评~~ 首先我们以列表ul li 来开始我们菜单也可以说导航条的制作: 在页面中我们首先构建以下XHTM ...

  3. CSS实现下拉菜单的几种方法

    PS:转自https://www.cnblogs.com/yewenxiang/p/6064117.html 第一种:display:none和display:block切换 1 <!DOCTY ...

  4. Html5+Css3制作下拉菜单的三种方式

    一.渐变式改变ol的高度 1.外部为ul标签,在每个li里嵌套一个ol列表2.设置外部li左浮动,内部ol标签绝对定位,外部li标签相对定位3.设置ol的高为0,溢出隐藏4.外部li标签:hover ...

  5. CSS+JS下拉菜单和纯CSS下拉菜单

    下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...

  6. 纯css3圆角下拉菜单 都没敢用js

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. HTML+CSS写下拉菜单

    今天学习了使用HTML+CSS实现下拉菜单效果,在这个例子中,我学到了如下知识点: 设置背景图片(background-image.background-size) 如何让无序列表横向显示(float ...

  8. CSS的下拉菜单被挡住,修改Z-INDEX也不成功

    CSS的下拉菜单被挡住,修改Z-INDEX也不成功 做了一个鼠标放上去就出现的下拉菜单,但是这个下拉的内容被挡住了. Z-INDEX 是设置不同块的层次的,我修改了问题还是有. 后来发现是必须要把该便 ...

  9. 纯洁CSS实现下拉菜单和下拉容器(纯洁CSS导航栏和导航下拉容器)

    虽然网上课程似即使案件大同小异,但我还是写,记笔记,也为您提供参考 我希望你能指导批评~~ 首先,我们必须列出ul li 开始我们的导航栏菜单也能说生产: 在下面的页面,我们先建XHTML结构体: & ...

随机推荐

  1. [scala] scala 对象(六)

    1.单例对象和伴生对象 2.定义单利对象的apply方法可不通过构造器直接创建对象 3.extends 来扩展单例对象 4.枚举实现 /** * 单例对象 * * @author xuejz * @d ...

  2. SQL Server 2008 清空删除日志文件 130G日志 10秒内变10M

    SQL2005: Backup Log DNName with no_log  '这里的DNName是你要收缩的数据库名,自己注意修改下面的数据库名,我就不再注释了. go dump transact ...

  3. itchat+pillow实现微信好友头像爬取和拼接

    源码下载链接:https://pan.baidu.com/s/1cPZhwy 密码:2t2o ###效果图 使用方法: 下载项目到本地,打开项目主目录,打开命令行,输入: pip install -r ...

  4. Python学习笔记(15)- os\os.path 操作文件

    程序1 编写一个程序,统计当前目录下每个文件类型的文件数,程序实现如图: import os def countfile(path): dict1 = {} # 定义一个字典 all_files = ...

  5. MongoDB(四)-- 主从配置

    一.前言 虽然MongoDB官方已经不建议使用主从模式了,但是 熟悉下 也是有用的,替代方案是采用副本集的模式.slave默认情况下是不支持读写的,但是master会把数据同步到slave,不支持客户 ...

  6. Ansible 如何查看模块文档

    [root@localhost ~]$ ansible-doc -l # 列出所有模块 [root@localhost ~]$ ansible-doc cron # 查看指定模块的文档

  7. Excel导出到浏览器(个人备份)

    /// <summary>  /// Excel导出  /// </summary>  /// <param name="dt"></pa ...

  8. 无刷新上传图片以及使用C#语言

    写这个纯属是给自己一个记忆啦 一.前台的代码以及调用的js <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtm ...

  9. Ubuntu VMware出现提示No 3D support is available的解决方法

    像我这样的Ubuntu脑残粉,电脑上只安装了Ubuntu,但是有时又必须得使用Windows,于是就装了一个Windows虚拟机,使用的是VMware,问题出在默认设置下启动虚拟机无法启动3D硬件加速 ...

  10. EPON ONU软件升级的若干优化方案

    1 说明 目前EPON ONU软件升级主要有IP方式(如SNMP/TR069)和TFTP+OAM两种.前者需占用大量IP地址,且配置ONU的IP地址需要手工操作,给业务开通和系统维护带来较大不便:后者 ...