Can i make a menu under a menu under a menu

[Dindon]

So there is the main menu which is “menubarre” when i go hover the “menubarre” it shows 6 new menu which are called “sousmenubarre” and what i would like to do is when i go hover one of the 6 “sousmenubarre” its shows another menu for example, at line 8 i tryed to create a new menu which is called “.histoire” . The problem is that when i try to edit the “.sousmenubarre” at line 5 in the CSS the new menu i just maded shows up too because it is in the “li”. So i tried to do .menubarre :hover :not(.histoire) .sousmenubarre but it didn’t work. So i was wondering if there was a way to do it without JS ( for a school project).

Pen: https://codepen.io/Dindon/pen/jzdWNz

[JeroenR]

Try something like this: https://codepen.io/jeroenreijs/pen/eMxLBb

I added display: block; to the .imagemenu class.
That’s why you don’t need the absolute positioning anymore on the .sousmenubarre class and the hover state remains.

I gave your second UL the class .sousmenubarre2 (your original classname 1 won’t work.). This class has display: none;. And I also placed this 2nd UL into the LI of the first UL.
When hovering the LI which the second UL is in, it gets display: inline-block;. The same as what you did on the first UL.

[Dindon]

Thank you a lot but i only have 1 more question about what you did. Why did you change the display of the .imagemenu to block and remove the position absolute, like i would like to know what it does?

[JeroenR]

That is because when you use absolute positioning, the element is on top of the listitem with class menubarre.
So when hovering that listitem, the hover effect is gone when the sousmenubarre becomes visible. So then when the hover effect is gone, the sousmenubarre disappears, so that the hovering of the menubarre again can be reached, and so on.

Maybe putting display: inline-block; in your initial sousmenubarre class will make that more clear to you (line 82 in your CSS). Then you will see what’s really going on.

[Dindon]

I am not sure i understand it all but still thank you a lot for fixing my problem.

[Author]

Posts