html+css编写二级菜单

最新推荐文章于 2024-10-03 10:42:46 发布

码农NoError

最新推荐文章于 2024-10-03 10:42:46 发布

阅读量517

点赞数 5

文章标签： css html 前端

本文链接：https://blog.csdn.net/zhangzhaoyuxunlei/article/details/141634164

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      ul {
        list-style: none;
      }

      a {
        text-decoration: none;
        display: inline-block;
        width: 100%;
      }

      .menu {
        width: 800px;
        margin: 0 auto;
        height: 40px;
        line-height: 40px;
        background-color: lightblue;
      }

      .menu > li {
        float: left;
        width: 120px;
        text-align: center;
        position: relative;
      }

      .menu li:hover>a{
        background-color: lightgreen;
        color: white;
      }

      .menu > li + li {
        border-left: 1px solid black;
      }

      .menu>li:hover>.menu_sub{
        display: block;
      }

      .menu .menu_sub {
        position: absolute;
        left: -1px;
        width: 100%;
        border: 1px solid black;
        display: none;
      }

      .menu .menu_sub > li + li {
        border-top: 1px solid black;
      }
    </style>
  </head>
  <body>
    <ul class="menu">
      <li><a href="">首页</a></li>
      <li>
        <a href="">文档</a>
        <ul class="menu_sub">
          <li><a href="">文档1.0</a></li>
          <li><a href="">文档2.0</a></li>
        </ul>
      </li>
      <li>
        <a href="">下载</a>
        <ul class="menu_sub">
          <li><a href="">下载1.0</a></li>
          <li><a href="">下载2.0</a></li>
        </ul>
      </li>
      <li><a href="">关于我们</a></li>
    </ul>
  </body>
</html>