我的下拉菜单隐藏在我的section标签后面 [英] My drop down menu is hidden behind my section tag

问题描述

我的下拉菜单隐藏在我的主要标签后面，我不知道我可以做什么暴露它。

My drop down menu is hidden behind my "mainsection" tag and I'm not sure what I can do to expose it. It needs to lay on top of the "mainsection" tag area and not behind it.

这里是jsfiddle： http://jsfiddle.net/nSmZ9/

Here is the jsfiddle : http://jsfiddle.net/nSmZ9/

这里是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;
}

推荐答案

.mainsection 稍后在您的HTML中定义，而不是菜单，并且由于两者都从常规流中删除， .mainsection 将覆盖菜单。我建议更自然的布局，但缺乏这样，你可以尝试这：

.mainsection is defined later in your HTML than the menu, and since both are taken out of the regular flow, .mainsection will cover the menu . I'd recommend a more natural layout but lacking that, you can try this:

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

这将只要元素 position 设置为 static 以外的任何元素。

This will guarantee the menu and everything within to be above everything else, as long as the elements have position set to anything except static.

这篇关于我的下拉菜单隐藏在我的section标签后面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！