0

我在产品、支持和社区导航链接上使用 CSS 创建了这些下拉菜单。下拉菜单底部有圆角。最后一个链接上的悬停效果会覆盖圆角并将其平方，这是我不想要的。我希望圆角即使悬停在下拉列表的最后一个底部链接上。我想我需要一个溢出属性：隐藏（？）在其中一种样式上，但我已经尝试了一切，但我无法让它正常工作。我错过了什么？

CSS 在这里。

谢谢！

4

4 回答 4

1

问题是该border-radius属性不会改变元素的边界，当元素获得背景颜色时<ul>呈现overflow: hidden;无用。<li>

我的解决方案是应用于下拉菜单中的border-radius: 0px 0px 8px 8px;每个底部元素。<li>

于 2013-06-25T16:49:32.767 回答
0

尝试overflow: hidden;设置.menu ul

于 2013-06-25T16:52:15.183 回答
0

正如您在这个小提琴中看到的那样，CSS 边框半径不是从其父级继承的：

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;
}
于 2013-06-25T16:52:23.003 回答
0

您需要将您拥有的边界应用<ul>到最后一个链接项目。如果您的悬停状态由<a>标签控制，那么您还需要将它应用到那里。

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

您可能还需要，或者需要这个：

.menu ul li:last-child a { border-radius: 0px 0px 8px 8px; }
于 2013-06-25T16:52:27.610 回答