Question

我的下拉菜单隐藏在我的＆＃34; mainsection＆＃34;标签，我不知道我能做些什么来揭露它。它需要位于＆＃34; mainsection＆＃34;标签区域，而不是它背后。

这里是html代码

<header>
<ul class="right-nav-after-login">
    <li>Home</li>
    <li>About</li>
    <li>
        Menu
        <ul>
            <li>Account</li>
            <li>My Gifts</li>
            <li>Log off</li>
        </ul>
    </li>
    <li>Contact</li>
</ul>
</header>
<article>
    <section class="mainsection"></section>
</article>

这是我的css

header {
    height: 66px;
    margin-left: 75px;
    margin-right: 75px;
    border: 2px solid black;

}

.mainsection {
    background-color: #a6dbed;
    height: 500px;
    position: relative;
}

.right-nav-after-login {
    float: right;
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
.right-nav-after-login li {
  font: bold 12px/18px sans-serif;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #fff;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
.right-nav-after-login li:hover {
  background: #555;
  color: #fff;
}
.right-nav-after-login li ul {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
.right-nav-after-login li ul li { 
  background: #555; 
  display: block; 
  color: #fff;
  text-shadow: 0 -1px 0 #000;
}
.right-nav-after-login li ul li:hover { background: #666; }
.right-nav-after-login li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

Answer 1

您可以使用z-index指定元素的垂直堆栈顺序。（请注意，为了使z-index起作用，元素必须具有绝对或相对定位。）

有不同的方法可以做到这一点。您只需要确保顶部所需的元素具有更高的z-index。这是一个解决方案：

.mainsection {
    ....
    z-index:1;
}

.right-nav-after-login li ul li {
    ....
    position:relative;
    z-index:2;
}

See demo

Answer 2

.mainsection稍后会在HTML中定义，而不是菜单，因为两者都是从常规流程中取出的，.mainsection将涵盖菜单。我建议使用更自然的布局，但缺少这种布局，你可以试试这个：

.right-nav-after-login, .right-nav-after-login * {
    z-index: 1;
}

只要元素position设置为除static之外的任何内容，保证菜单及其中的所有内容都将高于其他所有内容。

Answer 3

取下.mainsection。

position: relative;

Answer 4

//inset this code
 .right-nav-after-login li ul{z-index:100;}

我的下拉菜单隐藏在我的部分标签后面

4 个答案: