发表于: 2018-08-21 23:49:11

1 615


今天完成的事情

 css实现下拉框

 


 <div class="list">

    <ul class="nav">

    <li class="drop-down"><a href= "#"> 所在地&emsp;<img src="images/004.png"></a>

    <ul class="drop-down-content">

    <li><a href="#">通州</a></li>

    <li><a href="#">大兴</a></li>

    <li><a href="#">朝阳</a></li>

   

    </ul>

    </li>

        <li class="drop-down"><a href= "#">食宿&emsp;<img src="images/004.png"></a>

        <ul class="drop-down-content">

        <li><a href="#">包吃包住</a></li>

        </ul>

        </li>

        <li class="drop-down"><a href= "#">病人情况&emsp;<img src="images/004.png"></a>

        <ul class="drop-down-content">

        <li><a href ="#">卧床不起</a></li>

            <li><a href = "#">需要照顾</a></li>

       

        </ul>

        </li>

   

    </ul>

    </div>


------------------------------------------------------------------------------------------------------------------------------

.list{

   position: absolute;

   top: 80px;

   width: 100%;

  

}

   ul{

      list-style: none;

      -webkit-padding-start: 0px;

      margin:0;

   }

   .nav{

      display: flex;

      justify-content: space-around;

     

   }

   .nav>li{

      float: left;

   }

   ul a{

      display: block;

      text-decoration: none;

      width: 100px;

      height: 50px;

      text-align: center;

      line-height: 50px;

      color: #000000;

      background-color: #FFFFFF ;

   }

   .nav>li a{

      border-radius:  10px; 

   }

   .drop-down{

     flex: 1 1 auto;

      -webkit-padding-start: 0px;

      

     

     /* position:relative;*/

   }

   .drop-down-content{

     

      padding: 0;

      display: none;

     /* position:absolute;*/

   }

   .drop-down-content li:hover a{

      background-color: red;

   }

   .nav .drop-down:hover .drop-down-content{

      display: block;

   }

明天计划  继续完善,自适应到时可以用就是文字都不是居中的


遇到问题  暂无

 

收获一般





返回列表 返回列表
评论

    分享到