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& ...
随机推荐
- MongoDB系列（三）：增删改查（CURD）
上篇讲了MongoDB的基础知识,大家应该对MongoDB有所了解了,当然真正用的还是curd操作,本篇为大家讲解MongoDB的curd操作. 1.数据库操作 #.增 use config #如果数 ...
- Tensorflowlite移植ARM平台iMX6
一.LINUX环境下操作: 1.安装交叉编译SDK (仅针对该型号:i.MX6,不同芯片需要对应的交叉编译SDK) 编译方法参考:手动编译用于i.MX6系列的交叉编译SDK 2.下载Tensorflo ...
- redis3.2 源码安装
wget http://download.redis.io/releases/redis-3.2.3.tar.gz tar -zxvf redis-.tar.gz cd redis make & ...
- nmap脚本（nse）使用总结
nmap脚本主要分为以下几类,在扫描时可根据需要设置--script=类别这种方式进行比较笼统的扫描: auth: 负责处理鉴权证书(绕开鉴权)的脚本 broadcast: 在局域网内探查更多服务 ...
- Http请求Response Code含义
http状态返回代码 1xx(临时响应) 表示临时响应并需要请求者继续执行操作的状态代码.100 (继续) 请求者应当继续提出请求. 服务器返回此代码表示已收到请求的第一部分,正在等待其余部分.101 ...
- k8s管理pod资源对象（下）
一.标签与标签选择器 1.标签是k8s极具特色的功能之一,它能够附加于k8s的任何资源对象之上.简单来说,标签就是键值类型的数据,它们可于资源创建时直接指定,也可随时按需添加于活动对象中,而后即可由标 ...
- python基础（变量、基础数据类型、流程控制）
今日内容html {overflow-x: initial !important;}:root { --bg-color:#ffffff; --text-color:#333333; --select ...
- EF 操作数据库中的表
1.VS创建项目(实现数据库的增删改查.并在dataGridView中展示) 增.改通过Button,删通过快捷菜单ContextMenuStrip控件(DateGridView控件的ContextM ...
- CMS 与 框架
Framework:框架.是整合的工具集,基于编程语言.可以帮助我们快速开发网站.比较常见的是J2EE(基于Java),Symfony2(基于PHP),Django(基于Python),Ruby on ...
- 家谱（gen）x
家谱(gen) 时间限制 2S [问题描述] 现代的人对于本家族血统越来越感兴趣,现在给出充足的父子关系,请你编写程序找到某个人的最早的祖先. [输入格式]gen.in 输入文件由多行组 ...