从父母那里把伪元素放在背景下的任何方法？

Question

我有一个带有一些菜单的固定标题，还有一个二级菜单。 第二级菜单必须滑入，但在父母的背景下，有什么办法吗？！ 例如：

 `https://codepen.io/anon/pen/mwJZbr`

绿色背景必须在红色

下

Answer 1

看看这个。希望它有所帮助。

header{
  background-color: rgba(255,0,0,0.5);
  height: 50px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
nav ul.second{
  background-color: #3f3;
  width: 300px;
  opacity: 0;
  position: absolute;
  top: -100%;
  transition: all .5s ease;
}
nav ul.second:after{
  content: "";
  display: block;
  width: 100%;
  height: 100px;
}
nav ul li{
  position: relative;
  margin-right: 30px;
  display: inline-block;
}
nav ul li:hover ul{
  top: 34px;
  opacity: 1;
}
nav ul li ul li {
  width: 100%;
}

<header>
   <nav>
     <ul>
       <li>test</li>
       <li>test2</li>
       <li>test3
         <ul class="second">
           <li>test3.1</li>
           <li>test3.2</li>
         </ul>
       </li>
     </ul>
  </nav>
</header>