简单下拉菜单
<!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是一个块级元素，可以设置宽高
第二：ul有自带的margin和padding,需要去设置去掉
第三：使用hover伪类时，要注意display：none时，要用 父级：hover 元素｛｝