纯CSS实现下拉菜单导航

前言：本题是网易云课堂的前端微专业《页面制作》课程的作业题，当时对题意理解错误没有实现题目要求，成了心中永远的痛，所谓念念不忘必有回响，在学校图书馆花了几个小时做出来并对相关知识点进行了总结，写了这篇博文。好，进入正题。

1.需求：当鼠标hover到按钮上时，出现下拉菜单导航条。

2.HTML结构

<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>

3.设置样式

（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;  /*离它的父元素的边界为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;  /*离它的父元素的边界为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实现下拉菜单导航相关推荐

纯CSS实现下拉菜单及下拉容器等（纯CSS实现导航条及导航下拉容器）
原文:纯CSS实现下拉菜单及下拉容器等(纯CSS实现导航条及导航下拉容器) 虽然网上类似甚至相同的案例有很多,但是我还是写下,以记下笔记,也可供大家参考希望大家可以指导批评~~ 首先我们以列表ul ...
html下拉菜单触摸显示,CSS导航：纯CSS触碰式下拉菜单
[破洛洛教学网] 纯CSS触碰式下拉菜单 /* 整体设置*/ .navigation { margin:0; padding:0; width:610px; list-style-type:none; ...
兼容IE各版本的纯CSS二级下拉菜单
这是一个标准的CSS下拉菜单制作教程,有针对目前流行的IE6/IE7/IE8不同版本的CSS代码,因此可以在IE之间完全兼容,不过其它的浏览器像火狐/GG浏览器之类的没有测试,如果兼容IE8的话,那么 ...
html用css做下拉菜单,纯css实现下拉菜单
纯css实现下拉菜单 1.效果如下: 2.html代码时间最近时间最近评论最多被赞最多 3.css代码 * { margin: 0; padding: 0; } ul { list-style ...
html鼠标经过自动下拉菜单,操作方法：在鼠标经过后使用纯CSS实现下拉菜单，并附有示例说明（代码）...
纯CSS实现鼠标移动到按钮上打开下拉菜单. CSS部分: .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font ...
用纯css实现下拉菜单的几种方式
第一种:display:none和display:block切换 1 <!DOCTYPE html> 2 <html lang="en"> 3 <he ...
HTML+CSS实现下拉菜单导航栏
实现的效果 <!DOCTYPE html> <html><head><meta charset="UTF-8"/><title ...
css表格中下拉菜单怎么设置,css如何实现下拉菜单？css实现下拉菜单的方法（完整代码）...
本篇文章给大家带来的内容是关于css如何实现下拉菜单?css实现下拉菜单的方法(完整代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. /*盒子,相对定位*/ .dropdown{ ...
使用CSS制作下拉菜单样式
CSS制作下拉菜单制作tooltip显示形式代码示例实现原理 HTML 部分 CSS 部分制作可点击的下拉菜单实现原理代码示例 Appdex 制作tooltip显示形式代码示例 < ...
Android：有关下拉菜单导航的学习（供自己参考）
Android:有关==下拉菜单导航==的学习因为先前的学习都没想着记录自己的学习历程,所以该博客才那么迟才开始写. 内容: ==下拉菜单导航== 学习网站:android Spinner控件详解 ...

纯CSS实现下拉菜单导航

纯CSS实现下拉菜单导航相关推荐

最新文章

热门文章