i have following html
<ul id="nav"> <li> <a href="#">menu item 1</a> <ul class="sub_menu"> <!-- full of <li> sub menu items --> </ul> </li> <li> <a href="#">menu item 2</a> <ul class="sub_menu"> <!-- full of <li> sub menu items --> </ul> </li> <li> <a href="#">menu item 3</a> </li> </ul>
the #nav
100% width of browser window.
using css want float menu item
s side side inside container has similar css:
{ width: 1000px; margin: 0 auto; }
but want .sub_menu
s same width #nav
.
how can done without changing html?
you can position: relative
#nav
, thing li
, position: absolute; left: 0; right: 0
.sub_menu
.
this way .sub_menu
same width #nav
regardless of width of li
. you'll have add , adjust more styles make pretty , in position i'll leave you.
an additional requirement li
stay position: static
position of .sub_menu
must relative #nav
.
edit: @simon's answer pretty implementation of mine, op has left comment there indicating isn't adequate. we're still unsure of problem is.
Comments
Post a Comment