CSS3下拉菜单样式
CSS3下拉菜单样式
提问于 2013-06-26 00:38:30
我有这些drop down menus HERE创建使用CSS的产品，支持和社区导航链接。下拉菜单底部有圆角。最后一个链接上的悬停效果覆盖了圆角，并将其平方，这是我不想要的。我希望圆角仍然停留在悬停在最后一个底部的链接下拉。我想我需要一个overflow属性:隐藏(?)但是我已经尝试了所有的方法，但是我不能让它正常工作。我遗漏了什么？
The CSS is HERE.
谢谢!
回答 4
Stack Overflow用户
回答已采纳
发布于 2013-06-26 00:49:33
问题是border-radius属性不会更改<ul>元素的边界，当overflow: hidden;元素获得背景颜色时，它会使<li>变得无用。
我的解决方案是对下拉菜单中每个底部的<li>元素应用border-radius: 0px 0px 8px 8px;。
Stack Overflow用户
发布于 2013-06-26 00:52:15
尝试在.menu ul上设置overflow: hidden;
Stack Overflow用户
发布于 2013-06-26 00:52:23
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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17302882
复制相关文章
相似问题
腾讯云开发者
