親からbackgrondの下に擬似要素を挿入する方法はありますか？

Question

私はいくつかのメニューで固定ヘッダーを持っており、第2レベルのメニューがあります。 2番目のレベルのメニューは、親の背景の中でスライドする必要がありますが、何か方法はありますか？ 例：

`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>