Help with nested menu

[Freshtone]

I have a multinested menu as a menu item and im struggling to get the css to work with the nested items …

this is how far i get with my solution, is there anyone who can explain how to write css so that the submenus open further ?

as seen i want the computer equipment to open a list of < computer parts, storage, network ,monitor >
and these to open up relativly with there nested menus…i just cant get it to work …any help would be greatly appreciated !

code can be seen here :

https://codepen.io/jamie-kielland/pen/zYNKVaj

[tlc35us]

All the nested lists are display: none; until you hover on it’s parent. When you hover on something you only display: block; the next level. If you want to change the position of the nested list then you use position: relative; to it’s parent.

[MatchaCrisp]

So the problem stems from how you’ve chosen your CSS selectors. by writing something like .dropdown .submenu, it does not only select the submenu class elements that are children of dropdown class, CSS also selects the submenu classes that are grandchild or nested deeper. This means when you hover over the top most .dropdownall of the .submenu would open up.

A simple change of using .dropdown>.submenu fixes the issue by selecting the submenu elements that are direct descendants.

Here is a potential mockup: https://codepen.io/bill-ye/pen/RwKoZZa?editors=1100
Here’s some reading on CSS selector on MDN

now as you explore this you will soon realize that you cannot travel from one open submenu to the next at all.

Imagine you are hovering over a submenu1 and as a result the dropdown1 opens. But as you are about to leave the submenu1 area onto the next submenu2, CSS recalculates and determines that because you are no longer hovering over submenu1, dropdown1 collapses and therefore submenu2 is no longer where you are pointing your cursor.

This may work if you only nest once, with the top menu opening a horizontal selection of nested submenus. I’ve included a rough draft of that in the codepen as well.

However evaluate if these are going to be worth your effort, as they usually are not mobile-friendly as most mobile devices cannot use hover, and Javascript does a better and easier job at creating these menus.