Just cant get submenu to stack neatly :-(

Hi from about to thunder & lighting York UK :smile:

Ive hit a brick wall trying to get my sub menus to stack correctly on hover. This link illustrates my problem:

And here is the associated code pen:

Basically the menu section labelled “Venue examples” is the problem area, i just cant get the sub nav elements Pavilion & Leeds registry to sit directly underneath.

Any insights welcome :smile:

You have #menu li{} which affects every LI in that menu. That includes ddropdowns. That means they are getting 20% width and floats. You need to undo that for the child menu.

#menu li li

Now it’s just next to the right of the top level LI, because of this rule

li.sub:hover > ul {

That should be display:block;.

Actually, the entire menu should probably be scrapped. I tried to redo a bit of it for you. Still sort of awkwardly coded.


Take that as a starting point. I re-did the dropdown to use position:absolute; and changed the menu to a table-cell approach instead of the floated approach you were trying to do.

Paul loves redoing code so he might step in :slight_smile: .

The sun’s just come out so I’m off :smile:

I would add a z-index to the menu to make sure the sub is on top of those images.:wink:


Weird - didn’t have that issue in codepen, but I do see it now.

Oh well :frowning: .

Thank you so much Ryan & Paul :slight_smile: My menu works how i want know. So long since i did a bit of CSS forgot about the whole cascading rules. Thank you for working this out for me :slight_smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.