Html 元素后面的下拉菜单

Html 元素后面的下拉菜单,html,css,Html,Css,我的菜单上有些奇怪的东西 1个屏幕盖1显示它工作正常 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-

我的菜单上有些奇怪的东西

1个屏幕盖1显示它工作正常 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;}

您位于
z-index
区域导航main.content ul li ul li.last
低于您的父
区域导航main.content ul li
,因此由于堆栈顺序而使其隐藏。您需要将更高的
z-index
值设置为
.region nav main.content ul li ul li.last
,正如EmCo所说,这似乎是一个z-index问题。看起来嵌套的li的z索引为998,而li.last的z索引为991。也许改变li.last的z指数为998可以解决这个问题。

好的,如果有人感兴趣,我想出了解决办法

这些是我菜单中唯一设置的z索引

.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中确实起作用。last不需要它自己的z索引值,因为它将继承以前的li样式。只需将z-index从li.last样式中完全删除,它就可以工作。

尝试对每个嵌套级别使用不同的
z-index
。我设置了每个级别都有自己的z-index,但仍然得到相同的问题。使用上面的代码,只需更改此行
.region nav main.content ul li.last{border:0 none;z-index:991;}
z-index为998。不,这不起作用所有的z-index显示都设置好了,但我仍然得到相同的问题。好吧,我很有信心li上的z-index。最后一个是导致此问题的原因(这就是为什么第一个屏幕截图看起来正确,而第二个屏幕截图“坏了”——因为主菜单中的第一个屏幕截图不够长,所以z索引不是问题)。如果您尚未确定在进行更改后正在清除浏览器缓存。抱歉,我无法再提供帮助,祝您好运!基于设置每个菜单的z索引,现在我在两个部分都遇到相同的问题,这不再是最后一个问题。我已更新此问题,并使用自己的z索引设置所有级别,但仍然没有工作