如何 - 子导航 -> 子导航答案

【问题标题】：How TO - Subnav -> Subnav如何 - 子导航 -> 子导航
【发布时间】：2021-07-24 12:52:30
【问题描述】：

如何在 bootstrap 4 导航栏中拥有多个子导航？我有以下代码W3Schools

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
}

.navbar {
  overflow: hidden;
  background-color: #333; 
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.subnav {
  float: left;
  overflow: hidden;
}

.subnav .subnavbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .subnav:hover .subnavbtn {
  background-color: red;
}

.subnav-content {
  display: none;
  position: absolute;
  left: 0;
  background-color: red;
  width: 100%;
  z-index: 1;
}

.subnav-content a {
  float: left;
  color: white;
  text-decoration: none;
}

.subnav-content a:hover {
  background-color: #eee;
  color: black;
}

.subnav:hover .subnav-content {
  display: block;
}
 </style>
</head>
<body>

<div class="navbar">
  <a href="#home">Home</a>
  <div class="subnav">
    <button class="subnavbtn">About <i class="fa fa-caret-down"></i></button>
    <div class="subnav-content">
      <a href="#company">Company</a>
      <a href="#team">Team</a>
      <a href="#careers">Careers</a>
    </div>
  </div> 
  <div class="subnav">
    <button class="subnavbtn">Services <i class="fa fa-caret-down"></i></button>
    <div class="subnav-content">
      <a href="#bring">Bring</a>
      <a href="#deliver">Deliver</a>
      <a href="#package">Package</a>
      <a href="#express">Express</a>
    </div>
  </div> 
  <div class="subnav">
    <button class="subnavbtn">Partners <i class="fa fa-caret-down"></i></button>
    <div class="subnav-content">
      <a href="#link1">Link 1</a>
      <a href="#link2">Link 2</a>
      <a href="#link3">Link 3</a>
      <a href="#link4">Link 4</a>
    </div>
  </div>
  <a href="#contact">Contact</a>
</div>

<div style="padding:0 16px">
  <h3>Subnav/dropdown menu inside a Navigation Bar</h3>
  <p>Hover over the "about", "services" or "partners" link to see the sub navigation menu.</p>
</div>

</body>
</html>

我想在 About->Company 中添加另一个向下箭头（fa-caret）。例如关于->公司->管理、会计等我试图在另一个 class="subnav-content" 中添加一个 class="subnav-content" 但它不起作用。如何嵌套 class="subnav"？

我想要这样的东西

只有当我单击公司的 + 时，才能看到第二条带有管理、会计等的水平线。我尝试修改代码如下，但第二条水平线与 Admin、Accounting 等始终可见

<div class="subnav">
<button class="subnavbtn">About <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
  <button class="subnavbtn">Company <i class="fa fa-plus-square "></i></button>
    <div class="subnav-content">
        <a href="#">Admin</a>
        <a href="#">Accounting</a>
        <a href="#">Etc</a>
    </div>
  <a href="#team">Team</a>
  <a href="#careers">Careers</a>
</div>

【问题讨论】：

标签： html css bootstrap-4 navbar

【解决方案1】：

<!Doctype html>
    <html>
    <body>
        <style>
            #nav {
                list-style: none inside;
                margin: 0;
                padding: 0;
                text-align: center;
            }
    
            #nav li {
                display: block;
                position: relative;
                float: left;
                background: #24af15;
                /* menu background color */
            }
    
            #nav li a {
                display: block;
                padding: 0;
                text-decoration: none;
                width: 200px;
                /* this is the width of the menu items */
                line-height: 35px;
                /* this is the hieght of the menu items */
                color: #ffffff;
                /* list item font color */
            }
    
            #nav li li a {
                font-size: 80%;
            }
    
            /* smaller font size for sub menu items */
    
            #nav li:hover {
                background: #003f20;
            }
    
            /* highlights current hovered list item and the parent list items when hovering over sub menues */
    
            #nav ul {
                position: absolute;
                padding: 0;
                left: 0;
                display: none;
                /* hides sublists */
            }
    
            #nav li:hover ul ul {
                display: none;
            }
    
            /* hides sub-sublists */
    
            #nav li:hover ul {
                display: block;
            }
    
            /* shows sublist on hover */
    
            #nav li li:hover ul {
                display: block;
                /* shows sub-sublist on hover */
                margin-left: 200px;
                /* this should be the same width as the parent list item */
                margin-top: -35px;
                /* aligns top of sub menu with top of list item */
            }
        </style>
        </head>
        <ul id="nav">
            <li><a href="#">Main Item 1</a></li>
            <li><a href="#">Main Item 2</a>
                <ul>
                    <li><a href="#">Sub Item</a></li>
                    <li><a href="#">Sub Item</a></li>
                    <li><a href="#">SUB SUB LIST »</a>
                        <ul>
                            <li><a href="#">Sub Sub Item 1</a>
                                <li><a href="#">Sub Sub Item 2</a>
                        </ul>
                        </li>
                </ul>
                </li>
                <li><a href="#">Main Item 3</a></li>
        </ul>
    </body>
    </html>

【讨论】：

我已经有了那种导航栏，我想把样式改成我插入的图片