CSS vertical multi level dropdown menu issue

Question

I want to make a navigation menu, with a couple of dropdown menu's. (which i got working) now i want to put another submenu drop down inside dropdown 1. but i cant seem to get it to work. what do i have to do to make Sub menu 1 behave like dropdown 1? i want to make nested drop down, like a 3 level dropdown.

Thank you for your time.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Vertical Drop-Down Navigation using HTML & CSS</title>
<style type="text/css">
* {padding:0; margin:0;}
a {text-decoration: none;}
li {list-style: none;}
/* Navigation STyling */
.main-nav {width: 250px; background: #033677;}
.main-nav a {
    text-transform: uppercase;
    letter-spacing: .2em;
    color: #FFF;
    display: block;
    padding: 10px 0 10px 20px;
    border-bottom: 1px dotted red;
}


.main-nav a:hover {background: #C71E54;}


.sub-nav-ul ul {display: none;}
.sub-nav-ul li:hover ul {display: block;}

.main-nav-ul ul {display: none;}
.main-nav-ul li:hover ul {display: block;}

.main-nav-ul ul a:before {
    content: '\203A';
    margin-right: 20px;
}

.main-nav .sub-arrow:after {
    content: '\203A';
    float: right;
    margin-right: 20px;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
}
.main-nav li:hover .sub-arrow:after {
    content: '\2039';
}
</style>
</head>

<body>

<nav class="main-nav">
    <ul class="main-nav-ul">
    <li><a href="#">Home</a></li>

      <li><a href="#">DropDown 1<span class="sub-arrow"></span></a>
        <ul>
            <ul class="sub-nav-ul">
              <li><a href="#">SUB Menu 1<span class="sub-arrow"></span></a>
                <ul>
                    <li><a href="#">Sub Item 1X</a></li>
                    <li><a href="#">Sub Item 2X</a></li>
                    <li><a href="#">Sub Item 3X</a></li>
                    <li><a href="#">Sub Item 4X</a></li>
                </ul>
              </li>
            </ul>
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
            <li><a href="#">Item 4</a></li>
         </ul>
      </li>
      <li><a href="#">LINK 1</a></li>
      <li><a href="#">Dropdown 2<span class="sub-arrow"></span></a>
        <ul>
            <li><a href="#">Item 5</a></li>
            <li><a href="#">Item 6</a></li>
            <li><a href="#">Item 7</a></li>
            <li><a href="#">Item 8</a></li>
        </ul></li>
      <li><a href="#">LINK 2</a></li>
      <li><a href="#">LINK 3</a></li>
   </ul>
</nav>

</body>
</html>

why bothering to reinvent the wheel when there's bootstrap out there which covers all those elements? getbootstrap.com/docs/4.4/components/dropdowns just copy paste and adapt it to suite your needs — Terchila Marian
– Terchila Marian, Commented Feb 20, 2020 at 23:22

chris · Accepted Answer · 2020-02-21 06:11:47Z

Add the child combinator > selector to your code to be specific as to the descendant level.

.main-nav-ul > li > ul {display: none;}
.main-nav-ul li:hover > ul {display: block;}

.sub-nav-ul > li > ul {display: none;}
.sub-nav-ul li:hover > ul {display: block;}

Right now, when you hover over .main-nav-ul li, you are applying the block style to all ul elements that are nested within .main-nav-ul, which includes all ul elements nested inside of .sub-nav-ul lists as well. Using the > selector will only apply to direct descendants, and therefore not affect those which are nested further in other elements when you hover over the parent .main-nav-ul li. Then hovering over the .sub-nav-ul li will also only apply to its own direct descendants.

Here is the full working code:

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Vertical Drop-Down Navigation using HTML & CSS</title>
    <style type="text/css">
      * {padding:0; margin:0;}
      a {text-decoration: none;}
      li {list-style: none;}
      /* Navigation STyling */
      .main-nav {width: 250px; background: #033677;}
      .main-nav a {
        text-transform: uppercase;
        letter-spacing: .2em;
        color: #FFF;
        display: block;
        padding: 10px 0 10px 20px;
        border-bottom: 1px dotted red;
      }


      .main-nav a:hover {background: #C71E54;}

      .main-nav-ul > li > ul {display: none;}
      .main-nav-ul li:hover > ul {display: block;}

      .sub-nav-ul > li > ul {display: none;}
      .sub-nav-ul li:hover > ul {display: block;}


      .main-nav-ul ul a:before {
        content: '\203A';
        margin-right: 20px;
      }

      .main-nav .sub-arrow:after {
        content: '\203A';
        float: right;
        margin-right: 20px;
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
      }
      .main-nav li:hover .sub-arrow:after {
        content: '\2039';
      }
    </style>
  </head>

  <body>

    <nav class="main-nav">
      <ul class="main-nav-ul">
        <li><a href="#">Home</a></li>

        <li><a href="#">DropDown 1<span class="sub-arrow"></span></a>
          <ul class="level1">
            <ul class="sub-nav-ul">
              <li><a href="#">SUB Menu 1<span class="sub-arrow"></span></a>
                <ul class="level2">
                  <li><a href="#">Sub Item 1X</a></li>
                  <li><a href="#">Sub Item 2X</a></li>
                  <li><a href="#">Sub Item 3X</a></li>
                  <li><a href="#">Sub Item 4X</a></li>
                </ul>
              </li>
            </ul>
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
            <li><a href="#">Item 4</a></li>
          </ul>
        </li>
        <li><a href="#">LINK 1</a></li>
        <li><a href="#">Dropdown 2<span class="sub-arrow"></span></a>
          <ul>
            <li><a href="#">Item 5</a></li>
            <li><a href="#">Item 6</a></li>
            <li><a href="#">Item 7</a></li>
            <li><a href="#">Item 8</a></li>
          </ul></li>
        <li><a href="#">LINK 2</a></li>
        <li><a href="#">LINK 3</a></li>
      </ul>
    </nav>

  </body>
</html>

Pratiksha Kale · Accepted Answer · 2020-02-21 06:29:02Z

1

Here are reference link where you can get multilevel vertical dropdown menu

https://bootsnipp.com/snippets/prnvG

https://bootsnipp.com/tags/sidebar

https://www.codeply.com/go/NHX6wfzwdE/bootstrap-4-vertical-menu-with-submenu

answered Feb 21, 2020 at 6:29

Pratiksha Kale

3041 gold badge5 silver badges14 bronze badges

Collectives™ on Stack Overflow

CSS vertical multi level dropdown menu issue

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related