Question

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

The CSS is HERE.

谢谢！

Answer 1

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

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

Answer 2

尝试在overflow: hidden;

上设置.menu ul

Answer 3

CSS Border Radius不会从其父级继承，正如您在这个小提琴中看到的那样：

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; }

CSS3下拉菜单样式

4 个答案: