Multi-Level Drop-down Menu

Question

I am a newbie to javascript & css stuffs. I am trying to add a menu from this W3Schools example. The code is working fine. But I would like to add another level to the menu code to make it to multi-level menu (2 levels). How can I do that? I did tried but it's doesn't work accordingly. Hope experts here can provide some suggestions or advice. Your advice or suggestions are highly appreciated. Thanks in advance. Below are the code changed.

<!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;
}

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

.subnav1 .subnavbtn1 {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}
.subnav-content1 {
  display: none;
  position: absolute;
  left: 0;
  background-color: blue;
  width: 100%;
  z-index: 1;
}

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

.subnav-content1 a:hover {
  background-color: yellow;
  color: black;
}
</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>      
      <div class="subnav1">
        <button class="subnavbtn1">Career <i class="fa fa-caret-down"></i></button>
        <div class="subnav-content1">
          <a href="#company">Career 1</a>
          <a href="#team" >Career 2</a>
          <a href="#careers">Careers 3</a>
        </div>      
     </div>       
    </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>

Please add your current code (only relevant code) to your question. Note that I have removed irrelevant tags from your question (C#, ASP.NET, and Javascript are not related to your question). — ProgrammingLlama, Oct 09 '19 at 01:36
See this: https://stackoverflow.com/questions/9100344/pure-css-multi-level-drop-down-menu — EGC, Oct 09 '19 at 01:39
Hello! In general it's better to post your actual code in your question. While linking to an external site is acceptable in some cases, it's generally better to put your code here. The biggest reasons for doing this (IMO) are: 1) It allows people who view your question to see what you've coded without having to leave SO. 2) If the website (W3Schools in this case) changes something, the link could break, or the content could no longer be relevant. With that in mind, please post a [Minimal Reproducible Example.](https://stackoverflow.com/help/minimal-reproducible-example) — Jacques ジャック, Oct 09 '19 at 01:45

score 0 · Accepted Answer · answered Oct 09 '19 at 02:11

0

.subnav:hover .subnav-content, .subnav1:hover .subnav-content1 {
  display: block;
}

You need to add the css for the classes subnav1 and subnav-content1

https://jsfiddle.net/buzz868/1txq8bo6/1/

answered Oct 09 '19 at 02:11

buzz

171
1
3
13

Multi-Level Drop-down Menu

1 Answers1