HTML/CSS dropright 子菜单项与页面背景上的文本重叠（无法正确呈现）答案

【问题标题】：HTML/CSS dropright submenu item overlaps (doesn't render properly) with text on the page backgroundHTML/CSS dropright 子菜单项与页面背景上的文本重叠（无法正确呈现）
【发布时间】：2014-01-11 17:39:48
【问题描述】：

在HTML 页面中，我有一个导航菜单，当将鼠标悬停在某些菜单项上方时，会出现一个子菜单/下拉菜单。然后将鼠标移到某些子菜单的项目上方会出现另一个子菜单/dropright 子菜单。要了解这个概念，请参阅jsfiddle。

现在，尝试将鼠标悬停在菜单项Categories->All->IT 上方，您会看到该项目Programming 与页面/背景上的文本以某种方式重叠。并且之后的item就无法访问了。

查看 CSS 样式。是什么导致了这种情况，以及如何防止这种重叠？

【问题讨论】：

标签： html css menu

【解决方案1】：

只需在您的.droprightMenu 上设置一个较高的z-index，这会将下拉菜单置于该文本上方

例如：

.droprightMenu {
    display: none;
    /* hide the sub menus */
    background: #5f6975;
    border-radius: 0px;
    padding: 0;
    position: absolute;
    top: 100%;
    z-index: 100; /*ADD Z-INDEX*/ 
 }

【讨论】：

@Wlad 没问题，很高兴为您提供帮助

【解决方案2】：

试试这个DEMO，评论位置：相对；出：

 #homeMainContent #pages {
// position: relative;
 text-align: center;
 font-weight: bold;
 }

如果这对你有用，请告诉我

【讨论】：

谢谢，是的，它有效，我忽略了这么简单的事情

【解决方案3】：

只需将z-index: 99 加到.dropdownMenu 即可。

见：http://jsfiddle.net/CDx9j/4/

要理解：您的#pages 元素使用相对位置，例如您的下拉菜单。由于#pages 元素出现在 HTML 浮动中的菜单之后，因此它将出现在菜单上方。

【讨论】：