用html css解决下拉框问题

学习目标：

一遍弄懂“”下拉框显示“”问题
这是在body里面的配置

<div class="location">
      <div class="current-city">
      	<i class="fas fa-map-marker-alt"></i>
      	<a href="javascript:;">北京</a>
	  </div>
      <!-- 放置城市列表的div -->
      <div class="city-list">
      </div>
</div>

这是目的图

学习思路：

1.鼠标移入“北京”此地名时要显示下拉框（city-list）
代码为：

.current-city:hover +.city-list
       {
           display:block;
       }

但是发现，下拉框是显示了，但是从地名往下移动下拉框就消失了
（why?因为我们设置的hover只是对current-city设置的，当鼠标不在这上面时hover也就失效了）
所以此方法失效。

**

2.经过思考不难得到 hover应该给location,代码为：

/* 当鼠标移入到location时，让location后代元素city-list显示 */
 .location:hover .city-list{
            display: block;
        }

此时移入对话框便不会消失，但是会撑开父元素，如下图：

由此想到，应使其脱离文档流–>将city-list使用绝对定位
代码为：
/* 设置绝对定位，使其不占据页面的位置 */ position: absolute;

--------------中间再设置一下current-city:hover等等的一些简单样式（此处省略）-------------------------------------------------------------------

然后还遇到一个问题就是：
中间的这条线如何消除？

思路：
将padding-bottom 增大两像素，但是由于current-city和city-list是兄弟，所以就变成了，中间会有小缝隙

1.将下拉框往上提 top: 31px;
2.设置current-city在city-list上面：将current-city设置为
position:relative;
z-index: 1;
最后一个问题：当鼠标在下拉框时，北京不显示白底
代码如下：

.current-city:hover
        {
            background-color: white;
            border: 1px solid rgb(204, 204, 204);
            border-bottom: none;
        }

/*应变为：*/
/* 当鼠标移入到location时，让location后代元素current-city显示的效果 */
.location:hover .current-city{
      background-color: white;
      border: 1px solid rgb(204, 204, 204);
      border-bottom: none;
      padding-bottom: 1px;
}

结束！