CSS：導航欄中溢出的角落

我正在試圖製作一個導航欄，其子菜單處於隱藏狀態，直到它們停留在其對應的父菜單上。CSS：導航欄中溢出的角落

這工作正常，但我的導航欄的角落與

border-radius: 10px;

現在四捨五入，當我懸停，懸停區域的角落，不圓，但我希望他們保持在給定的導航欄的區域。所以，我嘗試使用：

overflow:hidden;

這適用於懸停區域的角落，他們現在適合我的導航欄的圓角，但現在（順理成章地）我的子菜單不顯示了，因爲它們是溢出我的導航欄（如預期），因此被隱藏。

如何確保我的角落溢出隱藏，但我的子菜單不是？

感謝您的幫助。

編輯：這是一個宣告失敗： http://jsfiddle.net/xznTR/5/

如果我不把溢出：隱藏在那裏，家庭和靈感的角落走出去的束縛導航欄。這我不想要。

如果我確實把溢出隱藏在那裏，子菜單不顯示。

2014-03-24 Tcanarchy

用你的代碼創建一個小提琴。 – Ruddy

只是圓角半徑添加到相應的列表項：

nav ul li:first-child 
{ 
    border-radius: 10px 10px 0 0; 
} 

nav ul li:last-child 
{ 
    border-radius: 0 0 10px 10px; 
}

2014-03-24 14:00:21 Danield

完美！這正是我所期待的。非常感謝！！ – Tcanarchy

這裏是一個小提琴不使用最後一個孩子CSS3選擇器 Fiddle

我刪除position:relative並添加了overflow:hidden至nav ul

然後我刪除了top:100%從nav ul ul

2014-03-24 14:10:07

OP說他不能在'ul'上設置'overflow：hidden'，因爲那樣子菜單確實不再顯示 – Danield

，這並不能解決我的問題。感謝您的幫助。 – Tcanarchy

檢查小提琴，全部在答案中解釋。如果你設置隱藏的溢出並從導航欄中刪除相對位置，那麼從導航欄中刪除頂部：100％ –

回答