Html/Css问题锚定标记
这是我的网站,我正在使用一个主题,当我点击我们的高管->国家高管时,会出现一个子菜单,但我无法点击所有项目,当我尝试点击副总裁时,它会自动显示Engugu高管菜单 谢谢大家帮助我整理我的问题 很抱歉,但是我不太熟悉Html/css,这个问题在所有浏览器上都存在 /*主菜单 ///////////////////////////////*/Html/Css问题锚定标记,html,css,Html,Css,这是我的网站,我正在使用一个主题,当我点击我们的高管->国家高管时,会出现一个子菜单,但我无法点击所有项目,当我尝试点击副总裁时,它会自动显示Engugu高管菜单 谢谢大家帮助我整理我的问题 很抱歉,但是我不太熟悉Html/css,这个问题在所有浏览器上都存在 /*主菜单 ///////////////////////////////*/ .menu-bar { background:#222222; } .menu-bar .menu { display:inl
.menu-bar {
background:#222222;
}
.menu-bar .menu {
display:inline-block;
}
.menu {
list-style:none;
}
.menu li {
position:relative;
}
.menu > li {
display:inline-block;
}
.menu > li > a {
padding:15px 22px;
font-size:15px;
color:#fff;
text-transform:uppercase;
display:inline-block;
}
.menu li:hover > a {
background:#000;
}
.menu-bar li ul {
width:172px;
height:0px;
padding:0;
background:#000;
z-index:201;
overflow:hidden;
display:block;
opacity:0;
filter:alpha(opacity=0);
position:absolute;
left:0px;
top:50px;
border-radius:0px 3px 3px 3px;
-moz-border-radius:0px 3px 3px 3px;
-webkit-border-radius:0px 3px 3px 3px;
transition:all 0.4s ease;
-moz-transition:all 0.4s ease;
-webkit-transition:all 0.4s ease;
}
.menu li li a {
padding:10px 12px;
font-size:14px;
color:#fff;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
.menu-bar li li {
display:none
}
.menu-bar li:hover li {
display:block
}
.menu-bar li li a {
display:block;
}
.menu-bar li li:hover > a {
background:#222;
}
.menu-bar li:hover > ul {
overflow:visible;
padding:8px;
}
.menu-bar li:hover > ul {
height:auto;
opacity:1;
filter:alpha(opacity=100);
}
.menu-bar li > ul ul {
height:auto;
margin-left:8px;
margin-top:-8px;
left:100%;
top:0px;
}
.menu-bar li li:hover > ul {
opacity:1;
top:0px;
}
这是一个简单的
z-index
问题。该行位于:
.menu-bar li ul
告诉所有子菜单的z索引为201。如果所有子菜单(无论是否在此时隐藏)都具有相同的z索引
,则按源顺序向下的子菜单将取代其上方的子菜单。这就是为什么下拉菜单突然弹出的原因
如果只更新悬停的子菜单,使其具有更高的索引,则它将取代源顺序中较低的任何子菜单。因此,通过更新此代码:
.menu-bar li li:hover > ul {
opacity:1;
top:0px;
z-index: 202; /* this is a new line */
}
将解决您的问题
这里是一个JSF的例子:请发布您的html、css和其他信息,这些信息可以帮助我们帮助您。另外,在Win/Chrome中,做您说您不能做的事情对我来说是有效的,所以您需要更具体地说明它在哪里不起作用。你应该试着自己做一些bug测试:在几个不同的浏览器中进行测试,然后告诉我们哪些浏览器不工作。@Setek我是一个新用户,我已经尽力解释了我的问题。请提升我,以便我将来可以使用stackoverflow。我们在某个时候都是新用户。如果有人告诉你你的问题不清楚,或者你需要提供更多信息,他们可能是对的。@kehrk我已经解释了我的问题。。非常感谢你的帮助,这很有效。:)