Steve Morin Steve Morin - 4 months ago 9
CSS Question

How to make subitem in menu dropdown dock under li not under the nav

I have made a menu with dropdown completely in css and I have a bit of difficulty to dock the subitems under the li being hovered.

Here is the Fiddle

Instead it docks under the whole nav structure. I know it's something to do with the - top: 100%;

nav ul ul {
background: #2A3E53;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
}


What do I have to do to make it dock under the li and push the rest of the items, any suggestions?

Answer

If I have understand your question, try changing this

nav ul ul ul {
    position: absolute; 
    left: 100%; 
    top:0;
}

into this

nav ul ul ul {
    position: static; 
    left: 100%; 
    top:0;
}

Here's a fiddle