Struggling to get list items in a css menu to float left without setting the width of the parent UL.
You can check out my progress on this JS fiddle: http://jsfiddle.net/FkK7Y/1/
In the "products menu," I have two sets of links that are currently stacking on top of each other. I want these sets of links to float next to each other to create a more panel-like submenu. I thought using inline-block (see li class="subMenu") would work, but it's not doing the trick.
.mainMenu ul.subMenu li.subMenu {
border:1px solid pink;
display:inline-block;
margin-right:10px;
}
Setting the width of the parent UL (also with class="subMenu" - there's a commented out width parameter in the code) seems to make the inline-block property function properly on the 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;*/ }
Since each sub-menu may contain one or more menus, I don't want to specify a fixed width. I'd prefer for it to expand based on the number of list items I add.
Is there a workaround for this issue?
Thank you!