用css做下拉菜单

abstract：总结：用ul与li做下拉菜单，先隐藏，然后用hover选择时显示出来。<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>淘宝</title> <link r

总结：用ul与li做下拉菜单，先隐藏，然后用hover选择时显示出来。

<!DOCTYPE html>

<html>

<head>

*{margin: 0px;padding: 0px;}

a{text-decoration: none;color: #6c6c6c;font-size: 13px;}

li{list-style: none;}

.clear{clear: both;}

.header{width: 100%;background-color: #f5f5f5;}

.header_content{width: 1000px;margin: 0 auto;text-align: center;height: 40px;line-height: 40px;}

.header_left{height: 40px;/*background-color: pink;*/ float: left;}

.header_left a{margin-right: 5px;}

.header_content a:hover{color: $FF5000;}

.header_right{width: 600px;height: 40px;float: right;}

.header_a{display: inline-block;height: 40px;width: 90px;text-align: center;position: relative;}

.header_a:hover{background-color: #fff;}

.header_a ul{border: 1px solid #f6f6f6;display: none;border-top: none;}

.header_a:hover ul{display: block;position: absolute; width: 89px;}

.header_a ul li:hover{background:#f6f6f6; }

.header_a ul li{color: #6c6c6c;height: 30px;line-height: 30px;text-align: left;padding: 0 3px;margin: 5px 0;}

</style>

</head>

<body>

<a href="">手机逛淘宝</a>

</div>

<ul>

<li>我已买的宝贝</li>

</ul>

</a>

<ul>

<li>我已买的宝贝</li>

</ul>

</a>

</div>

</div>

</body>

</html>

Correcting teacher：查无此人Correction time：2019-04-19 09:04:59
Teacher's summary：完成的不错。可以把常用的css样式，写到公用文件里，方便每次使用。继续加油。