CSS3下拉菜單樣式

Question

我在產品，支持和社區導航鏈接上使用CSS創建了這些drop down menus HERE。下拉菜單底部有圓角。最後一個鏈接上的懸停效果覆蓋了圓角並將其平方，這是我不想要的。我希望圓角在下拉的最後一個底部鏈接上保持懸停。我想我需要一個溢出屬性：隱藏（？）其中一種樣式，但我嘗試了一切，並且無法使其正常工作。我錯過了什麼？

The CSS is HERE.

謝謝！

Answer 1

問題是border-radius屬性不會更改<ul>元素的邊界，當<li>元素獲得背景色時，呈現overflow: hidden;無效。

我的解決方案是將border-radius: 0px 0px 8px 8px;應用於下拉菜單中的每個底部<li>元素。

Answer 2

嘗試.menu ul

Answer 3

CSS圓角半徑設置overflow: hidden;不是從其父繼承，你可以在這個小提琴看到：

http://jsfiddle.net/sZtHk/

HTML

<div class="outer"> 
    <div class="inner"></div> 
</div> 

CSS

.outer { 
    background: #ff0000; 
    width: 100px; 
    height: 100px; 
    border-radius: 24px; 
} 

.inner { 
    background: rgba(0, 0, 0, .25); 
    width: 100px; 
    height: 100px; 
} 

Answer 4

您需要將<ul>上的borderadius應用到最後一個鏈接項目。如果您的懸停狀態由<a>標籤控制，那麼您還需要將其應用於此處。

.menu ul li:last-child { border-radius: 0px 0px 8px 8px; } 

您也可以，或者需要這樣的：

.menu ul li:last-child a { border-radius: 0px 0px 8px 8px; }