HTML/CSS dropright 子菜单项与页面背景上的文本重叠(未正确呈现)

Question

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

现在，尝试将鼠标悬停在菜单项 Categories->All->IT 上方，您可以看到该元素 Programming 以某种方式与页面/背景上的文本重叠。然后无法访问它之后的元素。

参见 CSS 样式。是什么原因造成的，如何防止重叠？

Answer 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*/ 
 }