title: How TO - Subnav -> Subnav
body: <p>How to have more than one subnav in bootstrap 4 navbar?
  I have the following code <a href="https://www.w3schools.com/howto/howto_css_subnav.asp" rel="nofollow noreferrer">W3Schools</a></p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css&quot;&gt;
  &lt;style&gt;
  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;
  }
   &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class=&quot;navbar&quot;&gt;
    &lt;a href=&quot;#home&quot;&gt;Home&lt;/a&gt;
    &lt;div class=&quot;subnav&quot;&gt;
      &lt;button class=&quot;subnavbtn&quot;&gt;About &lt;i class=&quot;fa fa-caret-down&quot;&gt;&lt;/i&gt;&lt;/button&gt;
      &lt;div class=&quot;subnav-content&quot;&gt;
        &lt;a href=&quot;#company&quot;&gt;Company&lt;/a&gt;
        &lt;a href=&quot;#team&quot;&gt;Team&lt;/a&gt;
        &lt;a href=&quot;#careers&quot;&gt;Careers&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt; 
    &lt;div class=&quot;subnav&quot;&gt;
      &lt;button class=&quot;subnavbtn&quot;&gt;Services &lt;i class=&quot;fa fa-caret-down&quot;&gt;&lt;/i&gt;&lt;/button&gt;
      &lt;div class=&quot;subnav-content&quot;&gt;
        &lt;a href=&quot;#bring&quot;&gt;Bring&lt;/a&gt;
        &lt;a href=&quot;#deliver&quot;&gt;Deliver&lt;/a&gt;
        &lt;a href=&quot;#package&quot;&gt;Package&lt;/a&gt;
        &lt;a href=&quot;#express&quot;&gt;Express&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt; 
    &lt;div class=&quot;subnav&quot;&gt;
      &lt;button class=&quot;subnavbtn&quot;&gt;Partners &lt;i class=&quot;fa fa-caret-down&quot;&gt;&lt;/i&gt;&lt;/button&gt;
      &lt;div class=&quot;subnav-content&quot;&gt;
        &lt;a href=&quot;#link1&quot;&gt;Link 1&lt;/a&gt;
        &lt;a href=&quot;#link2&quot;&gt;Link 2&lt;/a&gt;
        &lt;a href=&quot;#link3&quot;&gt;Link 3&lt;/a&gt;
        &lt;a href=&quot;#link4&quot;&gt;Link 4&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;a href=&quot;#contact&quot;&gt;Contact&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div style=&quot;padding:0 16px&quot;&gt;
    &lt;h3&gt;Subnav/dropdown menu inside a Navigation Bar&lt;/h3&gt;
    &lt;p&gt;Hover over the &quot;about&quot;, &quot;services&quot; or &quot;partners&quot; link to see the sub navigation menu.&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>I'd like to add another arrow down (fa-caret) to About-&gt;Company. For example About-&gt;Company-&gt;Admin, Accounting, Etc
  I tried to add a class=&quot;subnav-content&quot; inside the other class=&quot;subnav-content&quot; but it don't work. How to Nest class=&quot;subnav&quot;?</p>
  <p>I'd like something like this
  <a href="https://i.stack.imgur.com/ZPPvB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZPPvB.png" alt="enter image description here" /></a></p>
  <p>with the second horizontal line with Admin, Accounting, Etc visible only when I click on the + of Company.
  I tried to modify the code as follow but the second horizontal line with Admin, Accounting, Etc is always visible</p>
  <pre><code>&lt;div class=&quot;subnav&quot;&gt;
  &lt;button class=&quot;subnavbtn&quot;&gt;About &lt;i class=&quot;fa fa-caret-down&quot;&gt;&lt;/i&gt;&lt;/button&gt;
  &lt;div class=&quot;subnav-content&quot;&gt;
    &lt;button class=&quot;subnavbtn&quot;&gt;Company &lt;i class=&quot;fa fa-plus-square &quot;&gt;&lt;/i&gt;&lt;/button&gt;
      &lt;div class=&quot;subnav-content&quot;&gt;
          &lt;a href=&quot;#&quot;&gt;Admin&lt;/a&gt;
          &lt;a href=&quot;#&quot;&gt;Accounting&lt;/a&gt;
          &lt;a href=&quot;#&quot;&gt;Etc&lt;/a&gt;
      &lt;/div&gt;
    &lt;a href=&quot;#team&quot;&gt;Team&lt;/a&gt;
    &lt;a href=&quot;#careers&quot;&gt;Careers&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>