CSS dropdown menu with submenu absolute/relative position to other element

css, drop-down-menu, html

Solution

Very interesting situation. I like the idea of having the flexibility to move a popup around a bit, and CBroe's excellent comment allowed me to come up with this FIDDLE.

CSS - just go to the "holder" ul and make its position relative.

#nav {
    position: relative;
}

CSS - then position the "hovered" elements absolutely:

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul {
    display: block;
    position: absolute;
    top: 50px;
    left: 150px;
}

Thanks very much CBroe!

Problem

I'm trying to make a horizontal drop-down menu where every submenu will appear in the same position (not under every submenu parent). I want to make this without javascript and this is example of what I have done for now (it's just plain css dropdown menu): http://jsfiddle.net/pEdaE/ Well I have to post some code with link so I picked this block to show you: ``` .main_menu ul { background-color: #efffc7; display: none; z-index: 100; width: 980px; height: 324px; left:0; position: absolute; } ``` This is css for submenu, but when I position it with position absolute or relative, it will just be positioned in his parent DIV. I tried using fixed position, but that's not pretty. I'm sorry if this question was already answered but I was having difficulties finding anything on this topic. I hope this can be done using only CSS. Thanks EDIT: The menu I made thanks to those involved can be found in this FIDDLE

Original source