[ANSWERED] html – CSS vertical multi level dropdown menu issue

Question 1

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>

Question 2

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

Question 3

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>

Bollate

[ANSWERED] html – CSS vertical multi level dropdown menu issue

By

Solution 1 :

Solution 2 :

Problem :

Comments

Comment posted by getbootstrap.com/docs/4.4/components/dropdowns

By

Related Post

[ANSWERED] python – Extract text from a class in HTML using CSS language

[ANSWERED] How do you add a background image in the margins and top of the page behind the body? (Html, Css)

[ANSWERED] html – I can’t get my carousel buttons to respond bootstrap 4

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate