下拉菜单

2018-06-24 01:58:41来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

<!Doctype html>

<html>

  <head>

    <meta charset="utf-8">

    <title>下拉菜单</title>

    <style>

      *{

        margin:0;

        padding:0;

      }

      ul{

        list-style:none;

        overflow:hidden;

        background-color:#333;

}

      li{

        float:left;

}

      li a,.dropbtn{

          text-decoration:none;

          font-size:20px;

          font-weight:bolder;

          padding:14px 16px;

          color:white;

          display:inline-block;  

}

        li a:hover,.dropdown:hover{

          background-color:black;

}

        .dropdown{

          display:inline-block;

}

       .dropdown-menu{

           display:none;

           position:absolute;

           min-width:150px;

           background-color:#b9def0;

}

      .dropdown-menu a{

            padding:12px 14px;

            text-decoration:none;

            display:block;

            color:black;

}

      .dropdown-menu a{

            background-color:gainsboro;

}

      .dropdown:hover .dropdown-menu{

          display:block;

}

    </style>

  </head>

  <body>

    <ul>

      <li>< a href="#">主页</a></li>

      <li>

        <div class=dropdown>

            <a href="#" class="dropbtn">技术分享</a>

        <div class="dropdown-menu">

            <a href="#">HTML</a>

            <a href="#">CSS</a>

            <a href="#">Javascript</a>

        </div>

    </ul>

  </body>

</html>

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:flexbox布局

下一篇:父类清除浮动的原因、(清除浮动代码,置于CSS中方便调用)