CODEWITHSUNDEEP
css
Freshtone
Freshtone

Reputation: 27

multi-nested menu Javascript / css

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>

Upvotes: 0

Views: 366

Answers (1)

rqen
rqen

Reputation: 104

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

Upvotes: 1

Related Questions