Create submenu under submenu dropdown using CSS

Question

In CSS, one submenu (Link 1, Link2, Link3) is available in this link. https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbar

I'm trying to create submenu (link 4.1, link4.2) under the above submenu as shown in below image. how can I get this submenu. .

I've tried below. But this is overlapping. I'm newbie to CSS. please share your ideas

<div class="dropdown">
    <button class="dropbtn">Dropdown 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <div class="dropdown">Link 1</div>
    <div class="dropdown-content">
        <a href="#">Link 2</a>
            <a href="#">Link 3</a>
        </div>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>

what have you tried so far? This isn't a free write-my-feature service, but we'll help you with your attempt if you're having problems. P.S. This appears to be a CSS and HTML question, not really related to the MVC framework, I have amended the tags accordingly. — ADyson
– ADyson, Commented Jun 13, 2018 at 12:40
Possible duplicate of How To Create SubMenu in Drop Down (HTML/CSS) — ADyson
– ADyson, Commented Jun 13, 2018 at 13:14

John Baker · Accepted Answer · 2018-06-13 12:53:18Z

2

This can be done by simple html/css work so just to give an idea here is a simple example:

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #000;
}

ul li {
  display: block;
  position: relative;
  float: left;
  background: #000;
}

li ul {
  display: none;
}

ul li a {
  display: block;
  padding: 1em;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
}

ul li a:hover {
  background: #001;
}

li:hover>ul {
  display: block;
  position: absolute;
}

li:hover li {
  float: none;
}

li:hover a {
  background: #000;
}

li:hover li a:hover {
  background: #000;
}

ul ul ul {
  left: 100%;
  top: 0;
}

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">First level Menu</a>
    <ul>
      <li><a href="#">Second Level</a></li>
      <li><a href="#">Second Level with third level</a>
        <ul>
          <li><a href="#">Third level</a></li>
          <li><a href="#">Third level</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

answered Jun 13, 2018 at 12:53

John Baker

2,41816 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Vish Over a year ago

I'm not getting submenus in this example

John Baker Over a year ago

@Vish the submenu's are at "First level Menu" then hover at "Second Level with third level" and you'll see the submenus.

Vish Over a year ago

I'm able to see now. Thank you. Can we add submenu for the sample menu which I shared in my question.

John Baker Over a year ago

@Vish you can use layout I've provided and simply change the styling to match with your sample menu that you've already shared.

Collectives™ on Stack Overflow

Create submenu under submenu dropdown using CSS

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related