1

我有一个类别表，它维护无限级别的子类别。它看起来像下面快照中显示的那样。

在此处输入图像描述

在上表中，第三列显示父名称。当鼠标按钮悬停在父名称上时，会显示一个菜单，以不同颜色显示类别的树结构。

当菜单弹出时，它被它下面的父名称重叠（我无法用语言正确表达，请看上图）。应该使用什么 CSS 或其他东西才能正确显示菜单？

父名显示<ul><li></li></ul>如下

<ul>
    <li>
        <div style='width:53px;cursor:hand;text-align:left; background-color:white; border:none; color:black; font-size:small;'>

         <?php echo htmlspecialchars($name, ENT_QUOTES, 'UTF-8');?>

        </div>                            
   </li>
</ul>

如果需要显示整个菜单的 CSS，如下所示。

.jqueryslidemenu{font:bold 9px Tahoma, Verdana, sans-serif;color:#fff;width: 100%;text-align:left;z-index:99999}
.jqueryslidemenu ul{margin: 0;padding: 0px;list-style-type: none;z-index:99999}
.jqueryslidemenu ul li{position: relative;display: inline;float: left;z-index:99999}
.jqueryslidemenu ul li a{font:bold 12px Tahoma, Verdana, sans-serif;display: block;background:#000;color: #fff;padding: 3px 3px;text-decoration: none;z-index:99999}
* html .jqueryslidemenu ul li a{display: inline-block;z-index:99999}
.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{color: #fff;text-decoration: none;z-index:99999}

.jqueryslidemenu ul li a:hover{background:#000;text-decoration:none;color: #03C;z-index:99999}
.jqueryslidemenu ul li ul{position: absolute;left: 0;display: block;visibility: hidden;z-index:99999}
.jqueryslidemenu ul li ul li{display: list-item;float: none;z-index:99999}
.jqueryslidemenu ul li ul li ul{top:0;z-index:99999}
.jqueryslidemenu ul li ul li a{font:bold 9px Tahoma, Verdana, Geneva, sans-serif;width: 140px;margin: 0;padding: 6px;border-top-width: 0;border-bottom: 1px solid gray;z-index:99999}
.jqueryslidemenuz ul li ul li a:hover{color:#fff; background:#000;z-index:99999}
.downarrowclass{position: absolute;top: 8px;right: 7px;display:none;z-index:99999}
.rightarrowclass{position: absolute;top: 6px;right: 5px;z-index:99999}
4

2 回答 2

2

看起来像一个 z-index 问题。

可能是因为你的css中的这一行：

.jqueryslidemenu ul li a

是否有一个 99999 的 z-index 使父链接文本显示在级联弹出菜单上方？将它的 z-index 降低到 1，看看是否有帮助。

于 2012-10-01T14:27:34.243 回答
1

看起来 z-index 设置为 99999，这意味着它强制该项目位于最顶部。为该特定元素 (ul li) 赋予 auto 或 1 的 z-index。为此，为该列赋予一个特定的类，如下所示。

html:

<li class="behind"></li>

CSS：

li.behind{
    z-index: auto;
}
于 2012-10-01T14:28:39.360 回答