I am facing an issue with my main menu #navi, where the items have different widths but the submenus should match the width of their parent items. To illustrate this problem, I have created a JsBin: http://jsbin.com/yusunohage/1
The text A very very very long submenu should not exceed the width of its parent A longer menu.
Below is the HTML code snippet:
<ul id="navi">
<li class="menu1">Menu </li>
<li class="menu2">A longer menu
<ul class="children">
<li>A very very very long submenu</li>
<li>Submenu</li>
</ul>
</li>
<li class="menu3">Menu item</li>
</ul>
And here is the corresponding CSS:
ol, ul {
list-style: none;
padding: 0;
}
#navi > li {
padding: 0 10px;
}
li {
float: left;
}
ul.children{
background: gold;
}
#navi li ul li {
float:none;
}