Just cant get submenu to stack neatly :-(

[Nightwing]

Hi from about to thunder & lighting York UK

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:
http://codepen.io/Pingbat/pen/xbBQqE

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
David

[RyanReese]

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
  {
    float:none;width:auto;
  }

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

li.sub:hover > ul {
    display:inline-block;
    }

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.

http://codepen.io/ryanreese09/pen/oXWXgb

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 .

[PaulOB]

@RyanReese

Paul loves redoing code so he might step in

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

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

#menu{position:relative;z-index:2}

[RyanReese]

@PaulOB

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

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

Oh well .

[Nightwing]

Thank you so much Ryan & Paul 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