Question

我有一个水平菜单，在悬停时有一个下拉菜单：

HTML结构如下：

<div id="menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Lorem</a></li>
        <li><a href="#">Ipsum</a></li>

        <li><!-- DropDown-->
            <a href="#">Drop Down</a>
            <ul>
                <li><a href="#">Dd Item</a></li>
                <li><a href="#">Another One</a></li>
                <li><a href="#">Lalalal</a></li>
                <li><a href="#">Item</a></li>
            </ul><div class="clear"></div>
        </li>

    </ul><div class="clear"></div>
</div>

我目前正尝试使用以下CSS来左下/右下角：

#menu ul li ul {
-khtml-border-radius-bottomright:8px;
-khtml-border-radius-bottomleft:8px;
-moz-border-radius-bottomright:8px;
-moz-border-radius-bottomleft:8px;
-webkit-border-bottom-right-radius:8px;
-webkit-border-bottom-left-radius:8px;
border-bottom-right-radius:8px;
border-bottom-left-radius:8px;
}

问题是我的<li>的背景干扰了<ul>的圆形边框，看起来很难看。

我做了jsFiddle所以你可以看到完整的代码

Answer 1

由于li上的边框半径和ul的纯色背景，ul的底角显示在li之外。

解决此问题的一种方法：将选择器#menu ul ul li:last-child添加到边框样式中。如果您想要更好的浏览器支持，请在最后一个元素上使用类名。

演示：http://jsfiddle.net/5MLTu/1/

~~另一种方法：将样式overflow:hidden添加到<ul>的当前边框样式中。演示：http://jsfiddle.net/5MLTu/2/~~

~~注意：上述方法似乎只适用于Firefox，所以不要使用它：）~~

我的Dropdown菜单底部出现了问题

1 个答案: