multi-nested menu Javascript / css

Question

I am trying to make a nested menu with CSS and struggle so much to get this working, I have my attempt here but cannot get further. Is there something I'm doing wrong and if so, can someone explain how the CSS works in these cases...This is a dynamically produced menu...

I can't get the submenus to work accordingly and no matter how much I google and search I can't get mine to work as the others! :)

Any help is appreciated!

#category_list {
  display: flex;
  justify-content: space-evenly;
  list-style-type: none;
  padding: 8px;
  background-color: azure;
}

.dropdown .submenu {
  display: none;
  list-style-type: none;
}

.dropdown:hover .submenu {
  display: block;
  list-style-type: none;
  background-color: antiquewhite;
}

#category_list .dropdown .submenu:hover {
  display: block;
}

#category_list .dropdown .submenu .dropdown .submenu {
  display: none;
  padding: 20px;
}

<ul class=category_list>
  <li class="dropdown">
    Computer Equipment
    <ul class="submenu">
      <li class="dropdown">
        Computer Parts
        <ul class="submenu">
          <li>
            <a href="categoryPage.html?categoryId=3">MotherBoard</a>
          </li>
          <li>
            <a href="categoryPage.html?categoryId=3">Power Supply</a>
          </li>
          <li>
            <a href="categoryPage.html?categoryId=3">Graphic Card</a>
          </li>
          <li>
            <a href="categoryPage.html?categoryId=3">Processor</a>
          </li>
          <li>
            <a href="categoryPage.html?categoryId=3">Memmory</a>
          </li>
          <li>
            <a href="categoryPage.html?categoryId=3">Computer Case</a>
          </li>
        </ul>
      </li>
      <li>
        Storage
        <ul>
          <li>
            <a>SSD</a>
          </li>
          <li>
            <a>Hard drive</a>
          </li>
        </ul>
      </li>
      <li>
        Network
        <ul>
          <li>
            <a>Router</a>
            <a>Switch</a>
            <a>Network Cable</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

I suggest you to use javascript insted of doing it with css... — Manas Khandelwal
– Manas Khandelwal, Commented Mar 30, 2021 at 10:41

rqen · Accepted Answer · 2021-03-30 12:39:56Z

1

Having multiple nested elements using the same class name does have it's complications, due to the cascading nature of css. Your specificity should be controlled a bit more using ">" immediate child-selector, so it's specific to each level of dropdown/submenu pair when to do the hover styles.

These would target all child submenu's, on all "levels":

.dropdown .submenu {}
.dropdown:hover .submenu {}

Instead you want to control the immediate child submenu of .dropdown:

.dropdown:hover > .submenu {displacy: block; ...otherVisibilityStyles}

Link to working example based on you code

answered Mar 30, 2021 at 12:39

rqen

1043 bronze badges

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

Collectives™ on Stack Overflow

multi-nested menu Javascript / css

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related