css三级下拉菜单怎么做

发表于前端技术学习版块 css,教程

网站布局设计中，下拉菜单是很常见的功能，通过下拉的方式给用户呈现更多的选项，极大地方便了用户的使用。而在这样的下拉菜单中，css三级下拉菜单是一种很常见的选择，下面我们就来讲讲 css三级下拉菜单怎

网站布局设计中，下拉菜单是很常见的功能，通过下拉的方式给用户呈现更多的选项，极大地方便了用户的使用。而在这样的下拉菜单中，css三级下拉菜单是一种很常见的选择，下面我们就来讲讲 css三级下拉菜单怎么做。

 <html>
  <head>
    <style>
      /* 隐藏 ul */
      #nav ul{
        display: none;
        position: absolute;
        z-index: 1;
        /* top=nav height */
        top: 40px;
      }
      /* 鼠标悬浮效果 */
      #nav li:hover > ul{
        display: block;
      }
      /* 菜单背景和字体颜色 */
      #nav li{
        background-color: #fff;
        color: #333;
      }
      /* 隐藏 li 的边框 */
      #nav ul li{
        border: none;
      }
      /* 三级菜单的背景和字体颜色 */
      #nav ul ul li{
        background-color: #f7f7f7;
        color: #333;
      }
    </style>
  </head>
  <body>
    <ul id="nav">
      <li>
        <a href="#">一级菜单1</a>
        <ul> 
          <li><a href="#">二级菜单1</a></li>
          <li>
            <a href="#">二级菜单2</a>
            <ul>
              <li><a href="#">三级菜单1</a></li>
              <li><a href="#">三级菜单2</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </body>
  </html>

上面的代码中，使用了两个层次嵌套的ul来实现三级下拉菜单的功能。首先将二级和三级菜单的ul隐藏，通过鼠标悬浮在一级菜单上来触发显示效果。三级菜单的样式与二级相类似，只需特别设置即可实现三级下拉菜单的效果。

文章说明:

本文原创发布于探乎站长论坛，未经许可，禁止转载。

题图来自Unsplash，基于CC0协议。

该文观点仅代表作者本人，探乎站长论坛平台仅提供信息存储空间服务。