    ul {
         list-style-type: none;
         margin: 0;
         padding: 0;
         background-color: #999;  /* deepskyblue*/
         overflow: hidden;
         /*        注意: overflow:hidden 添加到 ul 元素,以防止 li 元素列表的外出(当li{float:left}时)。         来源链接：https://www.runoob.com/try/try.php?filename=trycss_navbar_horizontal_float&basepath=0        */

     }
    
     li {
         float: left;  


     }
    
     li a {
         color: white;
         padding: 14px 16px;
         display: inline-block;
         text-decoration: none;
     }
    
     li>a.active {
         background-color: red;
     }
    
     li>a:hover:not(a.active),
     .dropbtn:hover {
         background-color:white;
     }
    
     .dropdown-content {
         display: none;
         position: absolute;
         /* 默认相对于<html>进行绝对定位 */
         background-color: #f9f9f9;
         min-width: 100px;
         box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2);
     }
    
     .dropdown-content a {
         color: black;
         display: block;
         /* 因为<a>标签不是块元素，min-width:100px不会生效 */
     }
    
     .dropdown-content a:hover {
         background-color: ;
         color:deepskyblue; 
     }
    
     .dropdown:hover .dropdown-content {
         display: block;
     }
    
     /* 中间的空格表示，鼠标悬念在.dropdown上时，dropdown的子元素.dropdown-content变为块元素 */
     /* ### 待完善 ###   
        因为.dropdown只用过一次，觉得可以删除<div class="dropdown"></div>来减少代码量，尝试  将.dropdown:hover .dropdown-content {display: block;} 修改为.dropbtn:hover+.dropdown-content {display: block;} 并删除<div class="dropdown"></div>后，鼠标悬停在“下拉菜单”上，会显示下拉菜单， 但无法选中菜单中的“链接 x”， ### 为什么？该如何完善？ ###    
     */