摘要：html代码：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" hr
html代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="static/css/style3.css"> <title>下拉菜单案例</title> </head> <body> <div class="header"> <div class="nav"> <a class="qnzx" href="#">千牛卖家中心 <ul> <li>免费开店</li> <li>已卖出的宝贝</li> <li>出售中的宝贝</li> <li>体检中心</li> <li>问商友</li> </ul> </a> </div> </div> </body> </html>
css代码：
*{
margin: 0;
padding: 0;
}
.header {
height: 35px;
width: 100%;
background-color: #F5F5F5;
border-bottom: 1px solid #EEEEEE;
}
.nav {
height: 36px;
width: 200px;
margin: 0 auto;
/*background-color: palevioletred;*/
}
a {
text-align: center;
line-height: 36px;
text-decoration: none;
color: #6C6C6C;
display: inline-block;
width: 200px;
height: 36px;
/*margin: auto;*/
}
a:hover{
color: #FF4400;
background-color: white;
}
.nav:hover {
background-color: white;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
padding-left: 1px;
}
.nav:hover ul{
display: block;
}
ul li:hover{
background-color: #F5F5F5;
}
ul li {
list-style: none;
text-align: left;
padding: 8px;
}
ul {
width: 201px;
border: 1px solid #cccccc;
border-top: none;
display: none;
position: relative;
right: 2px;
}效果图：
总结：
1、首先清空浏览器自带的边距。
2、css盒模型熟悉掌握后，对元素的微调能很好把握。
3、案例中使用相对定位对其了下拉菜单上下的边框线。
4、下拉菜单的实现原理和实现过程从案例中都有很好的体现。
批改老师：天蓬老师批改时间：2019-06-29 13:06:44
老师总结：下拉菜单, 一般都是用定位来做的, 也有其它方式实现, 这是一个非常实用的技能..........
