html - 元素后面的下拉菜单

Question

我的菜单有点奇怪

1 屏幕截图 1 显示它工作正常 2. 屏幕截图 2 显示它有问题

这是代码请帮我我卡住了

#navigation { margin-top: -17px; }
.region-nav-main .content {background:#6f0d1c; height:28px; color:#fff; width:auto; float:right; font:11px 'Trebuchet MS', Arial, Helvetica, sans-serif;}
.region-nav-main .content ul li {float:left; list-style:none; display:inline; position:relative; z-index:997; padding:0; margin:0;}
.region-nav-main .content ul li a {color:#fff; text-decoration:none; padding:0 10px; display:block; line-height:28px;}
.region-nav-main .content ul li a:hover {background:#242121;}


.region-nav-main .content  ul li.expanded a {background:url(../images/parent-dd.gif) right 12px no-repeat; padding:0 22px 0 10px;}
.region-nav-main .content  ul li a.parent:hover, .region-nav-main .content ul li.hover a, .region-nav-main .content ul li.hover a:hover, .region-nav-main .content  ul li.expanded a.active {background:#242121 url(../images/parent-dd.gif) right -82px no-repeat;}
.region-nav-main .content  ul li a.active {background:#242121}
.region-nav-main .content  ul li.expanded a.active-trail {background: #242121 url(../images/parent-dd.gif) right -82px no-repeat;}
.region-nav-main .content  ul li.expanded li a {background:none;}
.region-nav-main .content ul li.hover li a:hover {background:#3a3a3a none;}

.region-nav-main .content ul li ul {display:none; position:absolute; top:28px; left:0; z-index:998;}
.region-nav-main .content ul li ul li {background:#242121; border-bottom:1px solid #383535; display:block; float:none; color:#868686; float:left; clear:both;z-index:998;}
.region-nav-main .content ul li ul li.last {border:0 none;z-index:991;}



.region-nav-main .content ul li ul li:hover ul{ display:block;}
.region-nav-main .content ul li ul li a {color:#868686; background:none; width:135px;}
.region-nav-main .content ul li ul li a:hover {background:#3a3a3a; color:#fff;}

.region-nav-main .content ul li ul li ul{left:144px; top:-2px; display:none;}

我试过以下没有运气

.region-nav-main .content ul li{z-index:990 !important;}

.region-nav-main .content ul li ul {z-index:995 !important;}
.region-nav-main .content ul li ul li {z-index:995 !important;}

.region-nav-main .content ul li ul li ul {z-index:999 !important;}
.region-nav-main .content ul li ul li ul li {z-index:999 !important;}

Answer 1

好的，如果有人感兴趣，我想出了解决方案

这些是我的菜单唯一设置的 z-index

.region-nav-main .content ul li ul {z-index:985 !important;}
.region-nav-main .content ul li ul li ul {z-index:977 !important;}

我完全困惑为什么这是有效的，但它在 safari、opera、chrome 和 IE 中有效

Answer 2

您z-index的 at.region-nav-main .content ul li ul li.last低于您的父母.region-nav-main .content ul li，因此由于堆栈顺序而使其隐藏。您需要将更高的z-index值设置为.region-nav-main .content ul li ul li.last。

Answer 3

正如 EmCo 所说，这似乎是一个 z-index 问题。看起来嵌套的 li 显示良好的 z-index 为 998，而 li.last 的 z-index 为 991。也许将 li.last 更改为 z-index 为 998 可以解决此问题。

Answer 4

li.last 不需要自己的 z-index 值，因为它会从该级别 li 的先前样式继承它。只需从 li.last 样式中完全删除 z-index ，它应该可以工作。