css - Problems with 'floating' UL -

css - Problems with 'floating' UL -

.menu li { float: left; color: #fff; font-weight: bold; } .menu li { display: block; height: 20px; min-width: 110px; text-decoration: none; border-radius: 3px; padding: 4px; padding-left: 6px; padding-right: 6px; margin-left: 25px; margin-right: 25px; } .menu li ul { display: none; max-width: 110px; padding: 4px; margin-left: 25px; margin-right: 25px; list-style: none !important; list-style-image: none !important; } .menu li a:hover { background-color: rgba(0, 88, 153, 0.8); } .menu li:hover ul { display: block; padding: 0; margin-top: 9px; list-style: none !important; list-style-image: none !important; } .menu li:hover ul { display: block; background-color: rgba(0, 88, 153, 0.8); width: 110px; border-radius: 3px; padding-top: 6px; padding: 4px; padding-left: 6px; padding-right: 6px; text-align: left; margin: 0; margin-bottom: 5px;

above here code i'm using, want ul float above everything, tried 'fixed' , 'absolute' disappears, tried alter 'margin-left' 'inherit' didn't work either. want ul float beneath parent li.

jsfiddle

you need position submenu absolutely after first having positioned parent li relative

html (corrected) (with @malcom container

<div class="container"> <div class="menu"> <ul> <li><a href="#">home</a> </li> <li><a href="#">sub</a> <ul> <li><a href="#">sub1</a> </li> <li><a href="#">sub2</a> </li> <li><a href="#">sub3</a> </li> </ul> </li> </ul> </div> </div> can see, text moves when hover 'sub'

css (clipped relevant parts)

.menu li { float: left; color: #fff; font-weight: bold; position: relative; /* */ } .menu li ul { position: absolute; /* */ display: none; max-width: 110px; padding: 4px; margin-left: 25px; margin-right: 25px; list-style: none !important; list-style-image: none !important;

}

jsfiddle demo

css