导航页xia la | 码农工具

​x
 
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>my web</title>
    <style>
      ul{
        list-style-type:none;
        margin:0;
        padding:16px;
        overflow:hidden;
        background-color:bisque;
      }
      li{
        float:left;
      }
      li a,.dropbtn{
        padding:16px;
        text-align:center;
        text-decoration:none;
      }
      li a:hover,.dropdown:hover .drowbtn{
        background-color:azure;
        text-decoration:none;
      }
      .dropdown{
        position:relative;
        display:inline-block;
      }
      .dropdown-content{
        display:none;
        position:absolute;
        background-color:pink;
        min-width:160px;
        box-shadow:0px 8px 16px 0px rgba(0,0,0,2);
        padding:12px 16px;
      }
      .dropdown-contnt a{
        color:grey;
        display:block;
        padding:12px 16px;
        text-decoration:none;
      }
      .dropdown-content a:hover{
        background-color:lightpink;
      }
      .dropdown:hover .dropdown-content{
        display:block;
      }
    </style>
  </head>
  <body>
    <ul>
      <li><a class="active" href=#home>HOME</a></li>
      <li><a href="#menu">MENU</a></li>
      <div class="dropdown">  
        <a href="#way" class="dropbtn">WAY</a>
        <div class="dropdown-content">
          <a href="#1">1st</a>
          <a href="#2">2nd</a>
          <a href="#3">3st</a>
        </div>
      </div>
    </ul>
  </body>
</html>
HTML