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, Jun 13 '18 at 12:40
https://stackoverflow.com/questions/38780690/how-to-create-submenu-in-drop-down-html-css — Save, Jun 13 '18 at 12:51
Possible duplicate of [How To Create SubMenu in Drop Down (HTML/CSS)](https://stackoverflow.com/questions/38780690/how-to-create-submenu-in-drop-down-html-css) — ADyson, Jun 13 '18 at 13:14

score 2 · Accepted Answer · answered Jun 13 '18 at 12:53

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 '18 at 12:53

John Baker

2,315
13
12

I'm not getting submenus in this example – Vish Jun 13 '18 at 13:03
@Vish the submenu's are at "First level Menu" then hover at "Second Level with third level" and you'll see the submenus. – John Baker Jun 13 '18 at 13:06
I'm able to see now. Thank you. Can we add submenu for the sample menu which I shared in my question. – Vish Jun 13 '18 at 13:36
1

@Vish you can use layout I've provided and simply change the styling to match with your sample menu that you've already shared. – John Baker Jun 13 '18 at 13:48

Create submenu under submenu dropdown using CSS

1 Answers1