效果
截图尺寸
win10默认缩放比例是125%，截图测量尺寸时为了避免误差，需要将网页缩小至80%
样式设置的次序
- 为方便管理，尽量写全选择器，即使只通过一个选择器也可确定的元素
- 如图中.location .city-list，虽然只用.city-list便可确定元素，但为了保持层次关系，尽量写齐全
鼠标移入后显示
- 先把元素的display属性设置为none，再设置相关条件下display值为block
.location .city-list{
display:none;
}
.location:hover .city-list{
display:block;
}
- 注意理解设置的是location元素在鼠标移入状态下的city-list，而不是.citylist:hover
- 同时注意鼠标移入的对象，应该是父元素而不是其兄弟元素current-city，若按如下设置，鼠标无法选择city-list里的内容
.current-city+.city-list{
display:block;
}
- 为了使鼠标在city-list中选择时，current-city的背景色仍保持白色，需要设置.location:hover .current-city而不是.current-city:hover，思路和上面类似
..current-city:hover{
background-color:white;
}
元素边框覆盖
该效果涉及到元素的定位和层级问题
.location .current-city{
position:relative;
z-index:9999;
}
.location .city-list{
position:absolute;
z-index:999;
}
- 鼠标移入才显示的元素，为使其不占据页面的位置，需要设置成绝对定位，脱离文档流
- 同时，为了避免显示后会意外被其他元素遮盖，需要设置较大的z-index（如上面的999），确实需要遮盖它的元素，设置更大的层级即可（如上面的9999）
- 为了可以设置层级，需要为元素设置定位，但定位的类型不限，定位间没有层级高低之分，影响最小的是relative
