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 */ 
}