css - Second Level of each HTML unordered list element at the same fixed position -

css - Second Level of each HTML unordered list element at the same fixed position -

i utilize css optimized unordered html list...

html:

<div id="menucontainer"> <ul class="products"> <li>juices <ul> <li>orange</li> <li>apple</li> </ul> </li> <li>sweets <ul> <li>chocolate</li> <li>jelly beans</li> </ul> </li> </ul> </div>

parts of css:

.menu .products, .menu .products ul { list-style: none; } .menu li:hover .products { display:block; } .menu .products { width: 200px; } .menu .products li { position: relative; float: none; vertical-align: middle; height: 30px; } .menu .products li ul { position: absolute; left: -999em; width: 200px; } .menu .products li:hover ul { top: 0; left: 200px; padding-left: 50px; }

... website menu , want display follows: first level elements (juices, sweets) should listed below each other (which works fine) , sec level of each of these elements should displayed right next them @ same fixed position. consider fixed box on right says "i contain each sec level element". of course of study can done sec level "position:fixed; top: x; left; x" problem menu scrolls page. question if there way create sec level fixed not page menu container instead? otherwise position referenced top level elements, far know.

any thoughts?

i don't understand mean, going guess want following:

menu construction should fixed you not want menu fixed when scrolling

i going guess need container div hold menu in place so:

<div class="wrapper"> <div class="container-menu"> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div>

and css:

.wrapper { position:relative; } .container-menu { position:absolute; margin: // position here }

this ensure menu positioned absolutely within relatively positioned wrapper around whole website.

for more on absolute , relative position see this

html css position html-lists