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& ...
随机推荐
- 使用pagehelper分页工具page警告问题
警告: Hessian/Burlap: 'com.github.pagehelper.Page' is an unknown class in WebappClassLoader java.lang. ...
- htpasswd 使用&&在线生成器
1.简单介绍 htpasswd-管理用于基本身份验证的用户文件. 这个文件可以用来控制nginx或Apache的目录访问控制权限,例如,nginx的在配置nginx_status的态的时候(如下图所示 ...
- tornada-数据库
数据库 torndb安装 连接初始化 执行语句 execute execute_rowcount 查询语句 get query 与Django框架相比,Tornado没有自带ORM,对于数据库需要自己 ...
- Redis中info all命令解析
127.0.0.1:8376> info all# Server --- 服务器信息redis_version:2.8.20 -- redis服务器版本redis_git_sha1:000 ...
- :last-child的坑-CSS3选择器
CSS3选择器之:last-child - Eric 真实经历 最近开发项目的时候发现了一个这么多年忽略的问题,和大家分享一下.项目使用的是Antd组件库,有一个搜索框是这样的: 为了保证下拉框的内容 ...
- python之爬取网页数据总结（一）
今天尝试使用python,爬取网页数据.因为python是新安装好的,所以要正常运行爬取数据的代码需要提前安装插件.分别为requests Beautifulsoup4 lxml 三个插件 ...
- Python 练习实例3
Python 练习实例3 题目:一个整数,它加上100后是一个完https://www.xuanhe.net/全平方数,再加上168又是一个完全平方数,请问该数是多少? 程序分析: 假设该数为 x. ...
- QT：在其他窗口中显示QMainWindow
问题:在QFrame中嵌入QMainWindow窗口,却无法显示QMainWindow窗口,调用QMainWindow的show()却能出现单独弹出一个QMainWindow窗口. 解决: 由于QMa ...
- EasyUI DataGrid列表，显示undefined
datagrid中,显示undefined的解决方法 在get函数中,将为null的值返回空的字符串 1 public class TestModel { 2 3 private String key ...
- Java多线程和并发（二），Thread中的start和run的区别
目录 1.调用run方法 2.调用start方法 3.start和run的区别 二.Thread中的start和run的区别 1.调用run方法 public class ThreadTest { p ...