在CSS下拉菜單中定位，塊大小和背景

Question

這可能很簡單。我查看了以前的問題（以及網上的其他地方），但找不到解決當前問題的好方法。

我想要一個基於列表的CSS中心下拉菜單。沒什麼很複雜的。

這個one有一個非常簡單的解決方案，但我找不到我做錯了什麼。

在這一點上我有兩個問題（主要是在第一個列表中，還沒有真正查看列表中的鏈接）： （1）我希望列表有一個大的背景包含子列表中所有項目的矩形 （2）子列表中的項目被「截斷」，插入一個新行以使寬度不超過列表標題的寬度。

謝謝。

的CSS部分

#navbar ul { 
    text-align: center; 
    width: 100%; 
    font-variant: small-caps; 
    padding: 5px 0; 
    margin-top: 0; 
    margin-left: 0; 
    } 
#navbar ul li { 
    background-color: #ccc; 
    margin-right: 2%; 
    color: #069; 
    text-decoration: none; 
    position: relative; 
    display: inline; 
    padding: 5px 4px; 
    } 
#navbar li a { 
    text-decoration: none; } 
#navbar li ul { 
    display: none; 
    } 
#navbar li:hover ul, #navbar li.hover ul { 
    display: block; 
    position: absolute; 
    text-align: left; 
    margin: 8px 0 0 0; 
    padding: 0; 
    background-color: #eee; } 
#navbar li:hover li, #navbar li.hover li { 
    padding: 4px 0; 
    clear: left; 
    } 
#navbar li:hover li a, #navbar li.hover li a { 
    background-color: #eee; 
    border-bottom: 1px solid #fff; 
    color: #000; } 
#navbar li li a:hover { 
    background-color: #333; } 

HTML部分

<div id="navbar"> 
    <ul> 
     <li> 
      <a href="#" title="">Link 1</a> 
     <ul> 
       <li>item 1.1 and more</li> 
       <li>item 1.2</li> 
       <li>item 1.3</li> 
       <li>item 1.4 truncated?</li> 
       <li>item 1.5</li> 
       <li>item 1.6</li> 
     </ul> 

     </li> 
     <li> 
      <a href="#" title="">Link 2</a> 
      <ul> 
       <li><a href="#" title="">Link 2.1</a></li> 
       <li><a href="#" title="">Link 2.2</a></li> 
       <li><a href="#" title="">Link 2.3</a></li> 
       <li><a href="#" title="">Link 2.4</a></li> 
       <li><a href="#" title="">Link 2.5</a></li> 
       <li><a href="#" title="">Link 2.6</a></li> 
      </ul> 
     </li> 
     <li> 
      <a href="#" title="">Link 3</a> 
      <ul> 
       <li><a href="#" title="">Link 3.1</a></li> 
       <li><a href="#" title="">Link 3.2</a></li> 
       <li><a href="#" title="">Link 3.3</a></li> 
       <li><a href="#" title="">Link 3.4</a></li> 
       <li><a href="#" title="">Link 3.5</a></li> 
       <li><a href="#" title="">Link 3.6</a></li> 
     </ul> 
    </li> 
</ul> 
</div> 

Answer 1

1）它看起來像你已經有一個矩形背景。你只是想要更多的填充？ 如果是這樣，添加填充像這樣：

#navbar li:hover ul, #navbar li.hover ul {padding:10px}

2）對於截斷，嘗試

#navbar li:hover ul, #navbar li.hover ul {word-wrap: break-word;}

我不過建議你看看看看這篇文章，來幫助你與下拉菜單：http://matthewjamestaylor.com/blog/centered-dropdown-menus

編輯：不幸的是，word-wrap是一個CSS3屬性，並不支持所有瀏覽器。此外，使用跨瀏覽器CSS的文字換行似乎並不重要。這篇文章word wrap in css/js有更多的信息。