Nested menu design using HTML and CSS

Question

I created a dropdown menu, the menu opens when it has a hover effect. Then I added elements to this menu and when I create a hover effect on them, other menus open. But when I wanted to expand the menu one more step, I couldn't use the hover effect.

As you can see in the image, I can show the sub menu in a dropdown item with the hover effect, but before the mouse moves to that sub menu, it appears on the element under it. How can I create a 3 layer sub menu?

.navtop>ul {
  position: relative;
  z-index: 1
}

.navtop>ul>li {
  float: left;
  border-left: 1px solid #fff;
}

.navtop ul li a {
  display: block;
  padding: 10px 20px;
  color: #ccc
}

.navtop ul li:first-child {
  border: none;
}

.navtop>ul>li:hover>ul {
  display: block;
}

.navtop>ul>li>ul>li:hover ul {
  display: block;
}

.navtop>ul>li>ul>li>ul>li:hover>ul {
  display: block;
} // it didn't work.
.navtop>ul>li>ul li {
  position: relative;
}

.navtop>ul>li>ul {
  display: none;
  position: absolute;
  background: #333;
}

.navtop>ul>li>ul>li>ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 1px;
  background: #333
}

.navtop>ul>li>ul>li>ul>li>ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 1px;
  background: #333
} // it didn't work.

<div class="wrap">
  <nav class="navtop">
    <ul>
      <li><a href="#"><b class="caret"></b>Dropdwown Menus</a>
        <ul class="container">
          <li><a href="#">Dropdown Menu 1</a>
            <ul>
              <li><a href="#">Dropdown Submenu 1</a>
                <ul>
                  <li><a href="#">Dropdown Sub menu</a></li>
                </ul>
              </li>
              <li><a href="#">Dropdown Submenu 2</a></li>
              <li><a href="#">Dropdown Submenu 3</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
    <div class="clear"></div>
  </nav>
</div>

You'd likely come out far better using a CSS class to declaratively annotate top level elements that should expand their children on hover. This would keep you from having to explicitly target the li children. — A-Dubb
– A-Dubb, Commented Oct 17, 2024 at 14:08

ninadepina · Accepted Answer · 2022-12-19 13:08:32Z

3

Remove all the pieces of code with :hover and use .navtop li:hover>ul {display: block;} instead

answered Dec 19, 2022 at 13:08

ninadepina

1,27313 silver badges19 bronze badges

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

1 Comment

Dhaval Soni Over a year ago

Your answer is correct, but I need to give answer to with same CSS.

Dhaval Soni · Accepted Answer · 2022-12-19 13:12:20Z

Update your style according this

.navtop > ul{  
     position:relative; 
     z-index:1
}
.navtop > ul > li{ 
    float:left; 
    border-left:1px solid #fff;
}
.navtop ul li a{ 
    display:block; 
    padding:10px 20px; 
    color:#ccc
}
.navtop ul li:first-child{ 
    border:none;
}
.navtop > ul > li:hover > ul{ 
    display:block;
}
.navtop > ul > li > ul > li:hover ul{ 
    display:block;
}
 

.navtop > ul > li > ul > li > ul > li:hover > ul{ 
    display:block !important;
} // it didn't work.

.navtop > ul > li > ul li{ 
    position:relative;
}

.navtop > ul > li > ul{ 
    display:none; 
    position:absolute; 
    background:#333; 
}
.navtop > ul > li > ul > li > ul{ 
    display:none; 
    position:absolute; 
    left:100%; 
    top:1px; 
    background:#333
}

.navtop > ul > li > ul > li > ul > li > ul { 
    display:none !important; 
    position:absolute; 
    left:100%; 
    top:1px; 
    background:#333
}

Kaloyan Todorov · Accepted Answer · 2022-12-19 16:17:25Z

This should help!

* {
  margin: 0;
  padding: 0;
}

.parent {
  display: block;
  position: relative;
  float: left;
  line-height: 2rem;
  background-color: #d84f4f;
}

.parent a {
  margin: 1rem;
  color: #ffffff;
  text-decoration: none;
}

.parent:hover > ul {
  display: block;
  position: absolute;
}

.child {
  display: none;
}

.child li {
  background-color: #d84f4f;
  line-height: 2rem;
  width: 100%;
}

.child li a {
  color: #fff;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 10rem;
}

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

li:hover {
  background-color: #8a1313;
}

.parent li:hover {
  background-color: #6c1111;
}

<nav class="nav">
    <ul id="menu">
        <li class="parent">
            <a href="#">Menu</a>
            <ul class="child">
                <li class="parent">
                    <a href="#">Dropdown Menu 1</a>
                    <ul class="child">
                        <li class="parent">
                            <a href="#">Dropdown SUB 1</a>
                            <ul class="child">
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                            </ul>
                        </li>
                        <li class="parent">
                            <a href="#">Dropdown SUB 2</a>
                            <ul class="child">
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                            </ul>
                        </li>
                        <li class="parent">
                            <a href="#">Dropdown SUB 3</a>
                            <ul class="child">
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li class="parent">
                    <a href="#">Dropdown Menu 2</a></a>
                    <ul class="child">
                        <li class="parent">
                            <a href="#">Dropdown SUB 1</a>
                            <ul class="child">
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                            </ul>
                        </li>
                        <li class="parent">
                            <a href="#">Dropdown SUB 2</a>
                            <ul class="child">
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                            </ul>
                        </li>
                        <li class="parent">
                            <a href="#">Dropdown SUB 3</a>
                            <ul class="child">
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li class="parent">
                    <a href="#">Dropdown Menu 3</a></a>
                    <ul class="child">
                        <li class="parent">
                            <a href="#">Dropdown SUB 1</a>
                            <ul class="child">
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                            </ul>
                        </li>
                        <li class="parent">
                            <a href="#">Dropdown SUB 2</a>
                            <ul class="child">
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                            </ul>
                        </li>
                        <li class="parent">
                            <a href="#">Dropdown SUB 3</a>
                            <ul class="child">
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    
    <ul id="about">
        <li class="parent">
            <a href="#">About</a>
            <ul class="child">
                <li class="parent">
                    <a href="#">Dropdown Menu 1</a>
                    <ul class="child">
                        <li class="parent">
                            <a href="#">Dropdown SUB 1</a>
                            <ul class="child">
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                            </ul>
                        </li>
                        <li class="parent">
                            <a href="#">Dropdown SUB 2</a>
                            <ul class="child">
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                            </ul>
                        </li>
                        <li class="parent">
                            <a href="#">Dropdown SUB 3</a>
                            <ul class="child">
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li class="parent">
                    <a href="#">Dropdown Menu 2</a></a>
                    <ul class="child">
                        <li class="parent">
                            <a href="#">Dropdown SUB 1</a>
                            <ul class="child">
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                            </ul>
                        </li>
                        <li class="parent">
                            <a href="#">Dropdown SUB 2</a>
                            <ul class="child">
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                            </ul>
                        </li>
                        <li class="parent">
                            <a href="#">Dropdown SUB 3</a>
                            <ul class="child">
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li class="parent">
                    <a href="#">Dropdown Menu 3</a></a>
                    <ul class="child">
                        <li class="parent">
                            <a href="#">Dropdown SUB 1</a>
                            <ul class="child">
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                            </ul>
                        </li>
                        <li class="parent">
                            <a href="#">Dropdown SUB 2</a>
                            <ul class="child">
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                            </ul>
                        </li>
                        <li class="parent">
                            <a href="#">Dropdown SUB 3</a>
                            <ul class="child">
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                                <li><a href="#">Dropdown SUB SUB</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</nav>

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Cédric · Accepted Answer · 2022-12-19 13:14:38Z

Here I hide li inside li. Then when a li is hovered, I show li directly inside of it.

body, ul, li {
  padding: 0;
  margin: 0;
}
li li {
  display: none;
}
li:hover>ul>li {
  display: block;
}

li {
  background-color: orange;
}
li li {
  background-color: grey;
}
li li li {
  background-color: pink;
}

<ul>
  <li>Menu 1
    <ul>
      <li>Submenu 1
        <ul>
          <li>Subsubmenu 1</li>
          <li>Subsubmenu 2</li>
        </ul>
      </li>
      <li>Submenu 2
        <ul>
          <li>Subsubmenu 1</li>
          <li>Subsubmenu 2</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Menu 2
    <ul>
      <li>Submenu 1
        <ul>
          <li>Subsubmenu 1</li>
          <li>Subsubmenu 2</li>
        </ul>
      </li>
      <li>Submenu 2
        <ul>
          <li>Subsubmenu 1</li>
          <li>Subsubmenu 2</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Collectives™ on Stack Overflow

Nested menu design using HTML and CSS

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related