二级菜单（隐藏显示）

Mengxy灬

已于 2022-05-07 09:37:51 修改

阅读量3.9k

点赞数 2

文章标签： html5

于 2022-04-05 11:06:31 首次发布

本文链接：https://blog.csdn.net/qq_47548037/article/details/123966175

版权

效果图：

代码：

<!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>

    <style>

      * {

        margin: 0;

        padding: 0;

      }

      ul {

        list-style: none;

      }

      .box {

        width: 400px;

        height: 100px;

        margin: 0 auto;

        /* text-align: center; */

      }

      .box .item {

        float: left;

        width: 98px;

        text-align: center;

        color: white;

        border: 1px solid black;

        background-color: blue;



        /* padding-left: 10px; */

      }

      .item:hover {

        background-color: brown;

      }

      .item ul {

        display: none;

        background-color: lightblue;

        color: black;

      }

      .item:hover ul {

        display: block;

      }

      .item li:hover {

        color: aquamarine;

      }

      .item li {

        border: 1px solid gray;

      }

    </style>

  </head>

  <body>

    <ul class="box">

      <li class="item">

        视频教程

        <ul>

          <li>java</li>

          <li>python</li>

          <li>html5</li>

        </ul>

      </li>

      <li class="item">

        认真考试

        <ul>

          <li>123</li>

          <li>123</li>

          <li>123</li>

        </ul>

      </li>

      <li class="item">

        视频分类

        <ul>

          <li>电影</li>

          <li>国产</li>

          <li>美剧</li>

          <li>港剧</li>

          <li>动漫</li>

        </ul>

      </li>

    </ul>

  </body>

</html>