HTML + CSSドロップダウンメニュー

Question

htmlとcssでスライドダウンメニューを作成しようとしています。

私の唯一の問題は、リスト項目がメニューオプションとどのように重なっているかにあります。

どのようにメニューをメニューオプションの後ろにスライドさせるのですか？

HTML

<div class="container"> 
    <p>Text</p> 
    <div class="menu"> 
    <ul> 
     <li>Menu 1</li> 
     <li>Menu 2</li> 
     <li>Menu 3</li> 
    </ul> 
    </div> 
</div> 

CSS事前に

.container { 
    width: 30px; 
    height: 20px; 
    background-color: red; 
} 

ul { 
    list-style-type: none; 
    padding: 0; 
} 

.menu { 
    height: 0; 
    visibility: hidden; 
    top: -50px; 
    position: absolute; 
    transition: all .5s ease; 
} 

.container:hover .menu { 
    visibility: visible; 
    top: 20px; 
} 

.container .menu ul li { 
    border: 1px solid black; 
    width: 50px; 
} 

ありがとう！

Answer 1

Zインデックスをお試しください。 z-index：メニューとz-インデックスに-1をul

[Link][1] 


    [1]: https://jsfiddle.net/Le8jv91j/ 

Answer 2

すでに述べたように、-1のz-インデックスを使用します。 Codepen

.menu { 
    height: 0; 
    visibility: hidden; 
    top: -50px; 
    position: absolute; 
    transition: all .5s ease; 
    z-index: -1; 
}