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!

this need add:

.submenu{     white-space:nowrap; } 

updated: http://jsfiddle.net/fkk7y/2/


Comments

Popular posts from this blog

monitor web browser programmatically in Android? -

Shrink a YouTube video to responsive width -

wpf - PdfWriter.GetInstance throws System.NullReferenceException -