摘要：<!DOCTYPE html> <html> <head> <title>下拉菜單</title> <meta charset="utf-8"> <style type="text/css"> *{margin: 0;padd
<!DOCTYPE html>
<html>
<head>
<title>下拉菜單</title>
<meta charset="utf-8">
<style type="text/css">
*{margin: 0;padding: 0}
select{width: 50px;height:30px;}
li{list-style: none;}
.main{margin-top:30px;width:100px;}
.more{text-align: center;}
.main ul{ display: none;}
.main ul li{text-align: center;margin: 3px 0;padding: 3px 0 ;background-color: #ccc}
.main:hover ul{display:block;}
.main ul li:hover{background-color:skyblue}
</style>
</head>
<body>
<section >
<span>請選擇你所在的城市：</span>
<select>
<option>GZ</option>
<option>SZ</option>
<option>BJ</option>
<option>SH</option>
<select>
</section>
<section>
<div class="main">
<div class="more">更多</div>
<ul>
<li>電影</li>
<li>購物</li>
<li>英語</li>
<li>音樂</li>
</ul>
</div>
</div>
</section>
</body>
</html>第一：ul是一個塊級元素，可以設(shè)置寬高
第二：ul有自帶的margin和padding,需要去設(shè)置去掉
第三：使用hover偽類時，要注意display：none時，要用 父級：hover 元素｛｝
批改老師：查無此人批改時間：2019-04-18 09:50:09
老師總結(jié)：完成的不錯，步驟都寫出來了。把常用的css寫到公用文件，每次使用隨時拿出來。繼續(xù)加油。