css - Get UL to grow with contents (inline block list items) -
i have css menu working on having trouble getting list items float left without setting width of parent ul.
i've set js fiddle can take http://jsfiddle.net/fkk7y/1/
if take @ "products menu" you'll see i've got 2 sets of links (outlined in pretty pink line) stacking 1 on top of other. these sets of links float side side each other (making submenu more panelish). feel inline-block (see li class="submenu") should work here, doesn't.
.mainmenu ul.submenu li.submenu { border:1px solid pink; display:inline-block; margin-right:10px; }
however, if set width parent ul (also class="submenu" -i have width parameter commented out in code, feel free fiddle see in action) inline-block appears work on list items.
.mainmenu ul.submenu { position:absolute; left:-9999px; top:34px; background:#fff; padding:0 0 10px 10px; z-index:-1; border:1px solid #600; min-width:100px; /*width:200px;*/ }
but each sub-menu panel may have 1 or more of these menus not want specify width.. i'd grow number of lists items add it.
is there way around this?
thanks in advance!
Comments
Post a Comment