html - Float on absolute elements -

html - Float on absolute elements -

i'm building dropdown navigation menu , when apply position:absolute sec layer of li float:left wont bother @ all. if skip position:absolute screws first grouping of li , extends orginal div. have create 2 jsfiddle links show problem fiddle absolute in 1 looks want exept float left on li span. fiddle without absolute

<div id="navmenu"> <ul> <li><span>market</span> <ul> <li><a href="#">market1</a></li> <li><a href="#">market2</a></li> <li><a href="#">market3</a></li> <li><a href="#">market4</a></li> </ul> </li> <li><span>sale</span> <ul> <li><span>sale1</span></li> <li><span>sale2</span></li> </ul> </li> </ul> </div> #navmenu{ display:inline-block; background:red; } #navmenu ul{ list-style:none; margin:0; padding:0; } #navmenu ul li{ float:left; display:block; padding:0.5em; cursor:pointer; position:relative; } #navmenu ul li ul{ display:none; } #navmenu ul li:hover ul{ display:block; } #navmenu ul li ul li{ float:left; }

working fiddle add together position: fixed (to ul) instead of relative or absolute. prepare issue. , float not apply absolute elements etc. allow me know if want else. luck

html css