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


i'm trying make horizontal drop-down menu every submenu appear in same position (not under every submenu parent). want make without javascript , example of have done (it's plain css dropdown menu):

http://jsfiddle.net/pedae/

well have post code link picked block show you:

.main_menu ul {   background-color: #efffc7;   display: none;   z-index: 100;   width: 980px;   height: 324px;   left:0;   position: absolute; } 

this css submenu, when position position absolute or relative, positioned in parent div. tried using fixed position, that's not pretty.

i'm sorry if question answered having difficulties finding on topic. hope can done using css.

thanks

edit:

the menu made involved can found in fiddle

very interesting situation. idea of having flexibility move popup around bit, , cbroe's excellent comment allowed me come fiddle.

css - go "holder" ul , make position relative.

#nav {     position: relative; } 

css - position "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 cbroe!


Comments

Popular posts from this blog

android - Get AccessToken using signpost OAuth without opening a browser (Two legged Oauth) -

org.mockito.exceptions.misusing.InvalidUseOfMatchersException: mockito -

google shop client API returns 400 bad request error while adding an item -