abstract:<!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是一个块级元素,可以设置宽高
第二:ul有自带的margin和padding,需要去设置去掉
第三:使用hover伪类时,要注意display:none时,要用 父级:hover 元素{}
Correcting teacher:查无此人Correction time:2019-04-18 09:50:09
Teacher's summary:完成的不错,步骤都写出来了。把常用的css写到公用文件,每次使用随时拿出来。继续加油。