下拉菜单的案例
阿涛2019-06-28 16:23:26290html代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!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代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | *{
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;
}
a {
text-align: center;
line-height: 36px;
text-decoration: none;
color: #6C6C6C;
display: inline-block;
width: 200px;
height: 36px;
}
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、下拉菜单的实现原理和实现过程从案例中都有很好的体现。