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

最新推荐文章于 2024-08-24 09:00:00 发布

白云好懒

最新推荐文章于 2024-08-24 09:00:00 发布

阅读量1.7k

点赞数 1

分类专栏：前端学习网页制作文章标签： css html css3 前端

本文链接：https://blog.csdn.net/loveforlongtime/article/details/123613070

版权

前端学习同时被 2 个专栏收录

16 篇文章 1 订阅

订阅专栏

网页制作

9 篇文章 1 订阅

订阅专栏

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

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

<div class="left">
      <div class="city1"><a href="">江苏</a></div> 
     
      <div class="city"></div>

  </div>

 .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;
       /* 盖住下面的边框 */
   }

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

最后附上整体源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
   
    
   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;
   }

   

</style>
<body>
<div class="top clearfix">
 <div class="left">
      <div class="city1"><a href="">江苏</a></div> 
     
      <div class="city"></div>



  </div>



 <ul class="right">
    <li><a href="">你好，请登录</a> </li>   <li><a href="">免费注册</a></li>
    <div class="out"></div>
    <li><a href="">我的订单</a></li>
    <div class="out"></div>
    <li><a href="">我的京东</a></li>
    
    <div class="out"></div>
    <li><a href="">京东会员</a></li>
    <div class="out"></div>
    <li><a href="">企业采购</a></li>
    <div class="out"></div>
    <li><a href="">客户服务</a></li>
    <div class="out"></div>
    <li><a href="">网站导航</a></li>
    <div class="out"></div>
    <li><a href="">手机京东</a></li>
    <div class="out"></div>
    <li><a href="">网站无障碍</a></li>
    


  




</div>
    
</body>
</html>