CSS - Как отобразить выпадающий текст в одной строке?

Question

Я создаю выпадающее меню, и у меня есть проблема, показанная на этом img:

Я хочу, чтобы текст «2.1» отображался рядом с текстом «Элемент». По какой-то причине каждое новое слово получает новую строку.

Вот HTML:

<ul id='nav'> 
    <li><a href='/'>Item 1</a></li>
    <li><a href='/'>Item 2</a>
        <ul>
            <li><a href='/'>Item 2.1</a></li>
        </ul>
    </li>
    <li><a href='/'>Item 3</a></li>
    <li><a href='/'>Item 4</a></li>
    <li><a href='/'>Item 5</a></li>
</ul>

А вот и CSS:

#nav {
    list-style: none;
}
#nav li {
    float: left;
    position: relative;
}
#nav li a {
    display: block;
    text-decoration: none;
    text-align: center;
    background: #ccc;
    margin-right: 5px;
}
#nav li ul {
    position: absolute;
}
#nav li ul li {
    display: block;
}
#nav li ul li a {
    padding: 0px 10px;
    height: 20px;   
    text-align: left;
    background: #999;
}

Спасибо за любую помощь, Майк.

Answer 1

Простой способ исправить это - добавить свойство nowrap к #nav li ul li a:

#nav li ul li a {
    padding: 0px 10px;
    height: 20px;   
    text-align: left;
    background: #999;
    white-space: nowrap;  /* Forbids text wrapping */
}