如何使用 HTML 和 CSS 创建嵌套子菜单？答案

【问题标题】：How to create nested submenus using HTML and CSS?如何使用 HTML 和 CSS 创建嵌套子菜单？
【发布时间】：2022-01-24 08:46:23
【问题描述】：

我正在尝试使用 CSS 和 HTML 创建一个带有嵌套子菜单的菜单，如下所示。我已经给出了我的 CSS 和 HTML 代码来创建下面的嵌套子菜单。但是使用代码，我无法创建我期望的菜单结构。

如何使用 HTML 和 CSS 创建嵌套的子菜单？

菜单

CSS

* {框大小：边框框；} 身体 { 边距：0；字体系列：Arial、Helvetica、sans-serif； } .logo {width: 45px;height: 54px;margin: 1px;border-radius: 5%;} .header { 溢出：隐藏；背景颜色：#f1f1f1；填充：5px 10px； } .header 一个 { 向左飘浮; 颜色：黑色; 文本对齐：居中；填充：12px；文字装饰：无；字体大小：18px；行高：25px；边框半径：4px； } .header a.logo { 字体大小：25px；字体粗细：粗体； } .header a：悬停{ 背景颜色：dodgerblue；白颜色; } .header a.active { 背景颜色：dodgerblue；白颜色; } .header-right { 浮动：对； } 。落下 { 向左飘浮; 溢出：隐藏； } .dropdown .dropbtn { 字体大小：16px；边框：无；大纲：无；白颜色; 填充：14px 16px；背景颜色：继承；字体家族：继承；边距：0； } .navbar a:hover, .dropdown:hover .dropbtn { 背景颜色：红色； } .下拉内容{ 显示：无；位置：绝对；背景颜色：#f9f9f9；最小宽度：160px；盒子阴影：0px 8px 16px 0px rgba(0,0,0,0.2); z-index：1； } .dropdown-content 一个 { 浮动：无；颜色：黑色; 填充：12px 16px；文字装饰：无；显示：块；文本对齐：左； } .dropdown-content a:hover { 背景颜色：#ddd； } .dropdown：悬停 .dropdown-content { 显示：块； } @media screen and (max-width: 500px) { .header 一个 { 浮动：无；显示：块；文本对齐：左； } .header-right { 浮动：无； } }

HTML 代码

<div class="header">
         <img alt="" src="../images/logo.jpg"  class="logo"/><%--</a>--%>
        <div class="header-right" >
        <a href="#home" class="hover">Home</a>
        <a href=""  class="hover" >Main Master</a>
        <a href="../Master/reportspage.aspx"  class="hover">Reports</a>
    </div>
    </div>

【问题讨论】：

使用正确的列表而不是链接

标签： html css asp.net

【解决方案1】：

在这里，我创建了一个多级子菜单。您可以查看我的代码。

$(document).ready(function(){
  $('.dropdown-submenu a.test').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
   
<div class="container">
  <h2>Multi-Level Dropdowns</h2>
    <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Main Master
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a tabindex="-1" href="#">HTML</a></li>
      <li><a tabindex="-1" href="#">CSS</a></li>
      <li class="dropdown-submenu">
        <a class="test" tabindex="-1" href="#">Sub Master <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a tabindex="-1" href="#">3rd Master</a></li>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>
</body>
</html>

【讨论】：