CSS二级菜单
0.需求：当鼠标hover到按钮上时，出现下拉菜单导航条。
（2）如何实现下拉菜单在鼠标没有hover到按钮上时不出现
使用定位隐藏，设置下拉菜单为绝对定位，设置一个负的很大的值。
设置鼠标hover时，<ul>列表的left值。
<body>
<li class="btn"><a class="btn1" href="#">按钮</a>
<ul>
<li><a href="#">下拉菜单项</a></li>
<li><a href="#">下拉菜单项</a></li>
<li><a href="#">下拉菜单项</a></li>
<li><a class="last" href="#">下拉菜单项</a></li>
</ul>
</li>
</body>
（1）首先重置默认的<li>,<a>标签样式
li,
li a {
text-decoration: none;
list-style-type: none;
font-family: "宋体";
font-size: 12px;
color: #000;
}
（2）设置按钮的边框等，此时我设置的是外层<li>标签中<a>标签的样式，此时将内层<a>标签设置成块级block，这样可以设置宽高，并且后面有用（后面再说）。
.btn1 {
display: block;
border: 1px solid #ddd;
width: 50px;
height: 28px;
text-align: center;
line-height: 28px;
}
(3)将下拉菜单隐藏设置成不可见
ul {
margin-top: 1px;
position: absolute; /*设置绝对定位*/
left: -999em; /*设置隐藏*/
padding:; /*离它的父元素的边界为0，所以可以位于父元素<li>的正下方*/
}
(4)为下拉菜单项添加样式
ul li a {
display: inline-block; /*菜单项宽度未知，设置inline－block宽度为内容宽度*/
border-top: 1px solid #ddd;
border-left: 1px solid #ddd; /*这方法很笨，千万别学我*/
border-right: 1px solid #ddd;
height: 30px;
padding: 0 10px;
line-height: 30px;
}
(5)不能忘了最后一个
.last {
border-bottom: 1px solid #ddd;
}
(6)设置鼠标hover时出现下拉菜单
.btn:hover ul {
left: auto; /*默认ul的padding为0，位于按钮正下方*/
}
(7)设置hover时改变背景颜色
ul li a:hover {
background-color: #ddd;
}
(8)此时会有一个小bug，鼠标hover到按钮整一行时都会出现下拉菜单，因为此时最外层的<li>标签是块级元素，块级元素没有设置宽度默认的宽度是父元素宽度，而它的父元素是body，第（6）步写的是hover整个外层<li>标签，所以会出现这种情况。
解决办法： 可以在父元素<li>设置inline－block，子元素设置block，当子元素内容超出时，父元素宽度根据内容变化，所以，可以将按钮hover区域控制按钮边框之内。
.btn{
display: inline-block; /*设置btn是inline－block，
默认宽度为内容宽度，则鼠标只会在hover到按钮区域时才会展开下拉菜单*/
}
以下是完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>纯css实现下拉菜单</title>
<style>
li,
li a {
text-decoration: none;
list-style-type: none;
font-family: "宋体";
font-size: 12px;
color: #000;
}
.btn1 {
display: block;
border: 1px solid #ddd;
width: 50px;
height: 28px;
text-align: center;
line-height: 28px;
}
ul {
margin-top: 1px;
position: absolute; /*设置绝对定位，宽度为内容宽度*/
left: -999em; /*设置隐藏*/
padding:; /*离它的父元素的边界为0，所以可以位于父元素li的正下方*/
}
ul li a {
display: inline-block; /*菜单项宽度未知，设置inline－block宽度为内容宽度*/
border-top: 1px solid #ddd;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
height: 30px;
padding: 0 10px;
line-height: 30px;
}
.last {
border-bottom: 1px solid #ddd;
}
.btn:hover ul {
left: auto; /*默认ul的padding为0，位于按钮正下方*/
}
ul li a:hover {
background-color: #ddd;
}
.btn{
display: inline-block; /*设置btn是inline－block，
默认宽度为内容宽度，则鼠标只会在hover到按钮区域时才会展开下拉菜单*/
}
</style>
</head>
<body>
<li class="btn"><a class="btn1" href="#">按钮</a>
<ul>
<li><a href="#">下拉菜单项</a></li>
<li><a href="#">下拉菜单项</a></li>
<li><a href="#">下拉菜单项</a></li>
<li><a class="last" href="#">下拉菜单项</a></li>
</ul>
</li>
</body>
</html>
CSS二级菜单的更多相关文章
- html+css二级菜单制作！
二级菜单!!<!DOCTYPE html<html lang="e<head> <meta charset="UTF-8"> < ...
- crm 动态一级二级菜单
之前代码菜单是写是的 如何 让他 动态 生成了 首先 添加 2个字段 admin.py 更改 显示 from django.contrib import admin from rbac import ...
- 纯css实现鼠标感应弹出二级菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- html和css实现一级菜单和二级菜单学习笔记
实现一级菜单: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> ...
- css案例学习之ul li dl dt dd实现二级菜单
效果 代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
- 纯CSS二级纵向菜单
纯CSS二级纵向菜单 <body> <div class="divda"> <div class="nav"> <ul ...
- 个人练习：使用HTML+CSS制作二级菜单
最近一直在学习HTML+CSS,刚看完如果制作下拉菜单部分,就想着做一个练练手. 先上成品图: 就是上面这个效果,横向菜单选项能点击,鼠标放在上面也能展开二级菜单,二级菜单也能点击,点击后就会在底下的 ...
- CSS之实现二级菜单动态出现
一直觉得二级菜单的出现效果仅仅有js才干控制.今天研究了一下阿里巴巴站点的首页,才发现,原来二级菜单的动态显示也能够使用CSS来控制,原来对CSS是静态的东西一直是误解它了,CSS也能够实现动态的效果 ...
- CSS制作二级菜单时，二级菜单与一级菜单不对齐
效果如图: 部分代码如图: <li><a href="#" target="_blank">关于我们</a> <ul& ...
随机推荐
- deep_learning_Function_numpy_newaxis参数
np.newaxis的作用就是在这一位置增加一个一维,这一位置指的是np.newaxis所在的位置,比较抽象,需要配合例子理解. x1 = np.array([1, 2, 3, 4, 5]) # th ...
- C与汇编混合编程
C中调用汇编,要把汇编定义为全局的,加.global C内嵌汇编 __asm__( :汇编语句部分 :输出部分 :输入部分 :破坏描述部分 ); 用C内嵌汇编的方式:实现LED的点亮 //#defin ...
- 标准C语言(10)
指针数组的每个存储区是一个指针类型的存储区,字符指针数组包含多个字符类型的指针,每个字符类型指针可以代表一个字符串.字符指针数组可以用来代表多个相关字符串,二维字符数组也可以用来记录多个相关字符串,通 ...
- 2019 年百度之星·程序设计大赛 - 初赛一Game HDU 6669 (实现，贪心)
Game Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submissi ...
- 7.Go-用户信息和系统文件目录
7.1.获取操作系统用户信息 (1)os包及子包功能 os/exec包,负责执行外部命令 os/singal对输入信息的访问 os/user通过名次或ID 查询用户账号 (2)在os/user中提供了 ...
- Java 5，6，7，8，9，10，11新特性
转自https://it18monkey.github.io java5 泛型 (Generics) List<Integer> list=new ArrayList<Integer ...
- 【转载】浅析python日志重复输出问题
出处:https://www.cnblogs.com/huang-yc/p/9209096.html 问题起源: 在学习了python的函数式编程后,又接触到了logging这样一个强大的日志模块 ...
- 利用rand7() 产生rand10()(腾讯)
题目1:已知rand7() 可以产生 1~7 的7个数(均匀概率),利用rand7() 产生rand10() 1~10(均匀概率) int rand10() { int temp; int te ...
- MySQL--关于MySQL的那些练习题
之前联系了一些MySQL的查询相关知识,现在补充作为一个记录,免得自己忘记. 致谢博主:https://blog.csdn.net/dehu_zhou/article/details/52881587 ...
- 用CSS制作箭头的方法
一.箭头产生的原理 #demo12 { border: 100px solid; border-color:green blue orange red; width:100px; height:10 ...