纯CSS实现下拉菜单导航
前言：本题是网易云课堂的前端微专业《页面制作》课程的作业题，当时对题意理解错误没有实现题目要求，成了心中永远的痛，所谓念念不忘必有回响，在学校图书馆花了几个小时做出来并对相关知识点进行了总结，写了这篇博文。好，进入正题。
1.需求：当鼠标hover到按钮上时，出现下拉菜单导航条。
2.HTML结构
按钮 1. 下拉菜单项 1. 下拉菜单项 1. 下拉菜单项 1. 下拉菜单项3.设置样式
（1）首先重置默认的1. ,标签样式
li,
li a {
text-decoration: none;
list-style-type: none;
font-family: "宋体";
font-size: 12px;
color: # 000;
}
（2）设置按钮的边框等，此时我设置的是外层标签中标签的样式，此时将内层标签设置成块级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，所以可以位于父元素的正下方/
}
（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到按钮整一行时都会出现下拉菜单，因为此时最外层的标签是块级元素，块级元素没有设置宽度默认的宽度是父元素宽度，而它的父元素是body，第（6）步写的是hover整个外层标签，所以会出现这种情况。
解决办法：可以在父元素设置inline－block，子元素设置block，当子元素内容超出时，父元素宽度根据内容变化，所以，可以将按钮hover区域控制按钮边框之内。
.btn{ display: inline-block; /*设置btn是inline－block， 默认宽度为内容宽度，则鼠标只会在hover到按钮区域时才会展开下拉菜单*/}以上是我的一些想法以及实现，如有错误之处，欢迎各位前端大神留言评论拍砖。如果你有更好的做法也可以和我交流，我的代码写的有很多不足之处，希望多和各位交流提高，谢谢！！！
以下是完整代码：
纯css实现下拉菜单 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到按钮区域时才会展开下拉菜单*/ }按钮 下拉菜单项 1. 下拉菜单项 1. 下拉菜单项 1. 下拉菜单项关键字：html, css
版权声明
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！
