Question

The point is to have a single line on this menu, wrapped.
Instead, we are getting “two lines” and I’m not getting why is he dropping the line.

Can anyone please drop me a quick look about how is this happening ?

The HTML

<div id="main-menu">
<ul>
    <li><a href="">item 1</a></li>
    <li><a href="">item 2</a></li>
    <li><a href="">item 3</a></li>
</ul>
</div>

CSS

#main-menu {
    clear: right;
    overflow: hidden;
    margin-top: 75px;
    float:right;
}

#main-menu ul {
    overflow: hidden;
    text-align: right;
    border-radius: 5px;
    background-color: #333;
}

#main-menu ul li {
    display:inline-block;
    padding: 2px 2%;
}

#main-menu ul li a {
    color: #fff;
    font-size: .9em;
}

#main-menu ul li:hover {
    background-color: #EFAB00;
}

#main-menu ul li a:hover {
    text-decoration: none;
}

Here an example:

http://jsfiddle.net/XRm6Q/2/

Answer 1

This isn’t caused by the float, it’s because of the padding you’re applying to your lis (because when you have percentage paddings, the parent doesn’t resize-to-fit). If you change your padding: 2px 2%; to padding: 2px; the wrapping will be gone: little link.

Hope that helped!