我有一个类别表,它保持子类别的无限级别。它看起来像以下snap shot所示。CSS来正确显示菜单
在上述表中,第三列显示父名称。当鼠标按钮悬停在父名称上方时,会显示一个菜单,以不同颜色显示类别的树结构。
当弹出菜单时,它将与其下面的父级名称重叠(我无法正确地用文字表达它,请看上面的图像)。应该使用哪些CSS或其他主题以便菜单正确显示?
父名称如下
<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显示在<ul><li></li></ul>
,它是如下。
.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}
你检查的重叠组件,在图片 “JSF” 说的z-index小于实际的下拉列表中? – MLeFevre