CSS导航条以及简单下拉菜单实现

以京东导航条来练习，导航条的制作可以采用浮动或者弹性布局，这里采用浮动，要注意高度塌陷的问题。这里简单仿写一下

下面实现鼠标移动到江苏实现下拉菜单的实现，首先要有一个下拉菜单，设置好宽高，把他隐藏起来，开启定位调整他的位置。

      
江苏
     
  
 .city{width: 200px;height: 400px;      display: none;position: absolute;left: 30px;top: 30px;   }

接下来设置鼠标经过整个left这个div显示下拉菜单，但是下拉菜单显示后，鼠标在下拉菜单停留的时候下拉菜单也应该显示，所以要同时把下面的子元素city一同设置这个效果。加点边框阴影修饰一下。仅仅是想移动到江苏两个字上显示，那就选择a同时设置兄弟元素city

 .left:hover .city{display: block;border: 1px solid grey;box-shadow: 5px  5px  black;}

这个时候我们发现下面的下拉菜单会盖住上面，如图

 这里我们可以利用开启定位后的z-index,使得上面的元素覆盖住下拉菜单，

.city1{position: relative;padding-bottom: 5px;z-index: 1;/* 盖住下面的边框 */   }

这里我们还要考虑一个问题，就是下拉菜单下面如果还有元素，会不会把下拉菜单盖住，所以我们可以把下拉菜单的优先级设置高一些。这里没有其他元素就不设置了。 

最后附上整体源码

                   ul{list-style: none;   }   ul li{margin: 0 10px;line-height: 10px;   }   .top{height: 40px;width: 100%;background-color: grey;border-bottom: 2px solid black;position: relative;   }   .left,ul li{float: left;}   .right{float: right;   }   a{text-decoration: none;   }   a:hover,.left>a{color: red;   }   .right :nth-child(2)>a, .right :nth-child(6)>a {color: red;   }      .city{width: 200px;height: 400px;      display: none;position: absolute;left: 30px;top: 30px;   }   .city1{position: relative;padding-bottom: 5px;z-index: 1;/* 盖住下面的边框 */   }   .left:hover .city{display: block;border: 1px solid grey;box-shadow: 5px  5px  black;background-color: azure;/* city的层级要设置一下以防下面的元素盖住它，弹窗的层级要设置高些，这里下面没有其他元素就不设置了 */   }   .left{width: 60px;/* height: 10px; */margin: 10px  30px;   }   .city1 a{margin-left: 10px;   }   .left:hover .city1{background-color: azure;   }   .clearfix::after, .clearfix::before{content:'';display: table;clear: both;   }   .out{width: 1px;height: 15px;background-color: antiquewhite;float: left;}   .icon{width: 10px;height: 10px;background-color: brown;   }   
 
      
江苏
     
  
 
    
你好，请登录 
   
免费注册
    
    
我的订单
    
    
我的京东
 
    
京东会员
    
    
企业采购
    
    
客户服务
    
    
网站导航
    
    
手机京东
    
    
网站无障碍