blocks|key|1862834|text|问题是border-radius属性不会更改<ul>元素的边界，当overflow:+hidden;元素获得背景颜色时，它会使<li>变得无用。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1862835|我的解决方案是对下拉菜单中每个底部的<li>元素应用border-radius:+0px+0px+8px+8px;。|1862836|entityMap^0|3|D|M|4|X|H|1R|4|0|I|4|Q|V|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]|$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|I|$]]

The issue is that the <code>border-radius</code> property doesn't change the boundaries of the <code>&lt;ul&gt;</code> element, rendering <code>overflow: hidden;</code> useless when the <code>&lt;li&gt;</code> elements get a background color.

My solution would be to apply <code>border-radius: 0px 0px 8px 8px;</code> to each of the bottom <code>&lt;li&gt;</code> elements in your drop-down menus.

blocks|key|4199590|text|尝试在.menu+ul上设置overflow:+hidden;|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4199591|entityMap^0|3|8|E|H|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

Try setting <code>overflow: hidden;</code> on <code>.menu ul</code>

blocks|key|721284|text|CSS边框半径不是从它的父级继承的，你可以在这个小提琴中看到：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|721285|http://jsfiddle.net/sZtHk/|offset|length|721286|HTML|721287|<div+class="outer">
++++<div+class="inner"></div>
</div>|code-block|syntax|javascript|721288|CSS|721289|.outer+{
++++background:+#ff0000;
++++width:+100px;
++++height:+100px;
++++border-radius:+24px;
}

.inner+{
++++background:+rgba(0,+0,+0,+.25);
++++width:+100px;
++++height:+100px;
}|721290|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|Q|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@$D|Z|E|10|1|11]]|A|$]]|$1|F|3|G|5|6|7|12|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|13|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|14|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|15|8|@]|9|@]|A|$K|L]]|$1|Q|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|C]]]]

CSS Border Radius is not inherited from its parent as you can see in this fiddle:

<a href="http://jsfiddle.net/sZtHk/" rel="nofollow">http://jsfiddle.net/sZtHk/</a>

HTML

<pre><code>&lt;div class="outer"&gt;
 &lt;div class="inner"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

CSS

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

.inner {
 background: rgba(0, 0, 0, .25);
 width: 100px;
 height: 100px;
}
</code></pre>

blocks|key|718774|text|您需要将<ul>上的边框应用于最后一个链接项目。如果你的悬停状态是由<a>标签控制的，那么你也需要在那里应用它。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|718775|.menu+ul+li:last-child+{+border-radius:+0px+0px+8px+8px;+}|code-block|syntax|javascript|718776|您可能还需要以下内容：|718777|.menu+ul+li:last-child+a+{+border-radius:+0px+0px+8px+8px;+}|718778|entityMap^0|4|4|Y|3|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|P|$]]

You need to apply the borderadius that you have on your <code>&lt;ul&gt;</code> to the last link item. If your hover state is controled by the <code>&lt;a&gt;</code> tag then you need to apply it there also.

<pre><code>.menu ul li:last-child { border-radius: 0px 0px 8px 8px; }
</code></pre>

You may also, or alternatively need this:

<pre><code>.menu ul li:last-child a { border-radius: 0px 0px 8px 8px; }
</code></pre>

I have these <a href="http://hauppauge.com/gaming/index2.htm" rel="nofollow">drop down menus HERE</a> created using CSS on the Products, Support and Community nav links. The drop down menus have rounded corners on the bottom. The hover effect on the last link overrides the rounded corner and squares it off which I do not want. I would like the rounded corners to remain even on the hover on the last bottom link of the drop down. I think I need a property of overflow:hidden (?) on one of the styles but I've tried everything and I can't get it to work properly. What am I missing?

<a href="http://hauppauge.com/css/gaming/nav-menu-gaming.css" rel="nofollow">The CSS is HERE.</a>

Thanks!

CSS3 drop down menu styling

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有这些创建使用CSS的产品，支持和社区导航链接。下拉菜单底部有圆角。最后一个链接上的悬停效果覆盖了圆角，并将其平方，这是我不想要的。我希望圆角仍然停留在悬停在最后一个底部的链接下拉。我想我需要一个overflow属性:隐藏(?)但是我已经尝试了所有的方法，但是我不能让它正常工作。我遗漏了什么？谢谢!

问CSS3下拉菜单样式
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS3下拉菜单样式EN