html - absolute position stay with parent of parent instead of parent -

html - absolute position stay with parent of parent instead of parent -

i ran problem when trying position absolute positioned div. working should guess, want remain parent of parent instead of parent becouse have dropdown list , follow parent downwards on side when want remain in top first li div displayed. ive created jsfiddle show problem. http://jsfiddle.net/trptr/ can done using css or javascript must?

html

<div id="navmenu"> <ul> <li>example <ul> <li><a href="#">sub example1</a></li> <li><a href="#">sub example2</a></li> <li><a href="#">sub example3</a></li> <li><a href="#">sub example4</a></li> </ul> </li> <li>test <ul> <li>sub test 1 <div> <ul> <li><a href="">projekt</a></li> </ul> </div> </li> <li>sub test 2 <div> <ul> <li><a href="">projekt</a></li> </ul> </div> </li> </ul> </li> </ul> </div>

css

#navmenu{ display:inline-block; background:red; } #navmenu ul{ list-style:none; margin:0; padding:0; } #navmenu ul li{ float:left; position:relative; display:block; padding:0.5em; } #navmenu ul li ul{ position:absolute; display:none; border:solid 1px #333; background:#fff; } #navmenu ul li:hover ul{ display:inline-block; } #navmenu ul li ul li{ float:none; display:block; position:relative; } #navmenu ul li ul li:hover{ background-color:#ebebeb; } #navmenu ul li ul li div{ display:none; width:10em; height:14.6em; background:blue; position:absolute; top:0; left:6em; border:solid 1px #000; } #navmenu ul li ul li:hover div{ display:block; }

could remove position:relative both #navmenu ul li style set , #navmenu ul li ul li style set? http://jsbin.com/ziqov/1/edit

html css