Question

这是我的网站http://igbowomenassembly.org/，我正在使用主题，当我点击我们的执行 - ＆gt;国家行政人员，出现一个子菜单，但我无法点击所有项目，当我尝试点击副总统时，它会自动向我显示Engugu Executive菜单。

谢谢大家帮助我并解决我的问题。

很抱歉，除了我不熟悉Html / css之外，问题出在所有浏览器上。

/ *主菜单 /////////////////////////////// * /

    .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;
}

Answer 1

这是一个简单的z-index问题。该行：

.menu-bar li ul

告诉所有子菜单都有201的z-index。如果当时隐藏的所有子菜单都具有相同的z-index，那么按来源顺序降低的子菜单将取代它上面的一个。这就是下方菜单突然弹出的原因。

如果仅更新悬停的子菜单以获得更高的索引，则它将取代源顺序中较低的任何子菜单。所以通过更新这段代码：

.menu-bar li li:hover > ul {
    opacity:1;
    top:0px;
    z-index: 202; /* this is a new line */
}

将解决您的问题。

以下是jsFiddle：http://jsfiddle.net/2WcBW/

Html / Css问题锚标记

1 个答案: