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& ...
随机推荐
- 读《JavaScript面向对象编程指南》（二）
第五章 原型 在JavaScript中,所有函数都会拥有一个 prototype 的属性,默认初始值为空对象. 可以在相关的原型对象中添加新的方法和属性,甚至可以用自定义对象来完全替换掉原有的原型对象 ...
- spring+mybatis 多数据源的配置
方式一: 参见博客https://www.cnblogs.com/AmbitiousMice/p/6027674.html 此种方式每次需要在调用dao的时候设置对应的数据源. 方式二: 直接在myb ...
- Java-20180419
1.leetcode第二题 给定两个链表,逆序转换为数值相加,在逆序输出新链表. Input: (2 -> 4 -> 3) + (5 -> 6 -> 4)Output: 7 - ...
- oozie 启动过程中--- Existing PID file found during start. Removing/clearing stale PID file.
如果oozie使用kill -9 暴力杀死了tomcat,再启动的时候,会出问题,需要删除tomcat的pid文件 彻底停止oozie的tomcat的进程,然后删除pid文件 rm -rf /exp ...
- Kattis - heapsoffun Heaps of Fun (概率密度函数+dp)
题意:有一棵含有n个结点(n<=300)的根树,树上每个结点上的权值是从[0,ai](ai<=1e9)区间内随机的一个实数,问这棵树能形成一个最小堆的概率. 由于结点取值范围是1e9而且是 ...
- noi.ac NA537 【Graph】
本来以为过了...然后FST了... 吐槽:nmdGraph为什么不连通... 这题想法其实非常\(na\ddot{\imath}ve\),就是对于一个连通块先钦点一个点为根,颜色是\(1\),考虑到 ...
- jquery 图片切换
仿着写的一个jquery的图片切换小插件,代码如下: html: <!DOCTYPE html> <html lang="en"> <head> ...
- AOP 实现日志
package com.foen.foensys.config; import com.alibaba.fastjson.JSON;import com.foen.foensys.model.SysL ...
- CSS3实现穿墙广告效果
㈠分享一组很有趣的代码: 具体如下: <!doctype html> <html> <head> <meta charset="UTF-8" ...
- hdu 1051 wooden sticks (贪心+巧妙转化）
#include <iostream>#include<stdio.h>#include<cmath>#include<algorithm>using ...