当前位置：文江博客话题详情

如何显示下拉菜单超过标题div

发布于 2024-09-10 05:49:51 字数 270 浏览 1 评论 0原文

我在显示下拉菜单时遇到问题。请参阅以下示例：

http://staging.gwynconsulting.com/rif/ hello-world-2/

当我将鼠标悬停在“租用完成”时，我无法显示所有菜单项。

我尝试使用许多 css 属性，但我无法使其工作...

谢谢...

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

╰◇生如夏花灿烂 2024-09-17 05:49:51

第一个子项目被裁剪是由于 #header 和 #nav 上的两个 overflow: hide; CSS 指令造成的。
删除这两条指令，您将看到子菜单。

由于列表项是浮动的，#nav 不再具有流动内容，因此高度为 0：背景已消失。
您应该将背景图像放在每个单独的浮动列表项上，无论是 ul 还是父项。

从可访问性的角度来看，除非必要，否则不应在链接上添加标题属性。在这里，您的链接文本是明确的，并且您的标题与文本完全相同：您的标题是不必要的。

<a href="/" title="Home">Home</a> <!-- not OK. Title attribute should be removed -->
<a href="/brochure.pdf" title="Download our brochure (PDF, 1.53 MB)">Download our brochure</a> <!-- OK, 2 useful infos about format and size added -->
<a href="/brochure.pdf" title="(PDF, 1.53 MB)">Download our brochure</a> <!-- not OK, title should include the text of the link and add sth to it -->

The first sub-item being cropped is due to two overflow: hidden; CSS instructions on #header and #nav.
Remove both instructions and you'll see sub-menus.

As your list-items are floating, #nav no longer have flowing content and thus has an height of 0: background has disappeared.
You should put your background-images on each individual floating list-item whether than ul or a parent.

From an accessibility point of view, you should not add title attributes on your links except if necessary. Here the text of your links are explicit as is and your titles are strictly identical to text: your titles are unnecessary.

<a href="/" title="Home">Home</a> <!-- not OK. Title attribute should be removed -->
<a href="/brochure.pdf" title="Download our brochure (PDF, 1.53 MB)">Download our brochure</a> <!-- OK, 2 useful infos about format and size added -->
<a href="/brochure.pdf" title="(PDF, 1.53 MB)">Download our brochure</a> <!-- not OK, title should include the text of the link and add sth to it -->

回复收藏 0 原文