flex,简单丑陋的二级下拉菜单，

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      text-decoration: none;
      list-style: none;
    }   body{
     background-color: #ccc;
   }
    .container{
          display: flex;
          background-color: #888888;
          text-align: center;
          justify-content: center;
          align-items: center;
    }
    .father{
      padding: 10px 25px;
      position: relative;
    }
    .son{
       position: absolute;
       background-color: #888888;
       top: 41px;
       left: 15px;
       padding: 5px;
      display: none;
    }
    .son>li{
      width: 60px;
      padding: 5px;
      font-size: 14px;
      /*display: none;*/
    }
    .son>li:hover{
       background-color: white;
      color: red;
    }
    .father:hover .son{
      display: block;
    }
  </style>
</head>
<body>
<nav class="container">
  <li class="father"> 歌星大全
    <ul class="son">
      <li>周姐伦</li>
      <li>那英</li>
      <li>汪峰</li>
    </ul>
  </li>
  <li class="father"> 游戏大全
    <ul class="son">
      <li>拳皇97</li>
      <li>套熊猫</li>
      <li>接水管</li>
    </ul>
  </li>
  <li class="father"> 影视大全
    <ul class="son">
      <li>杀生</li>
      <li>那一夜</li>
      <li>封门村</li>
    </ul>
  </li>
</nav></body>
</html>
相关文章
