In the css below, I’m setting the width of the parent ul element to 950px so that the menu is left aligned with the width of my 950px layout that’s centered in the browser (the menu’s parent containers are all 100% of viewport width, so nothing else to constrain them to).
However, all child UL elements are also 950px. I want the child UL elements to be shrink wrapped to their parent li’s width unless that width is smaller than the longest word in the child LI stack. How do I make it so?
.menu.nav {margin:0 auto; width:100%; position:absolute; top:0;height:40px;line-height:35px;position:fixed;z-index:9999;background:url(header.gif);-moz-box-shadow:inset 0 -2px 5px #ccc,0 2px 3px #555;box-shadow:0 2px 5px #555}
*+html .menu.nav {height:35px;left:0;border-bottom:2px solid #ccc}
.menu.nav ul {overflow:visible; display:inline-block;width:950px;position:relative; list-style: none; z-index:50; padding:0;margin:8px 0;}