爲什麼這個下拉消失？

Question

我正在研究這個相當簡單的下拉菜單，我無法理解爲什麼當您將鼠標懸停在第一個鏈接上時，下拉菜單消失了？

http://haizel.co.uk/wedding/

您可以上面查看。 CSS下面：

nav { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    margin: 25px 0; 
    font-size: 18px; } 

nav ul li ul li { 
    width: 150px; 
    padding: 0; 
    font-size: 14px; } 

nav ul { 
    display: flex; 
    list-style: none; 
    margin: 0; } 

nav li{ 
    position: relative; 
    margin: 0; 
    padding: 0 20px; } 

nav a{ 
    text-decoration: none; 
    text-transform: uppercase; 
    color: #fff; 
    font-family: 'Montserrat', sans-serif; } 

nav ul ul{ 
    display: none; 
    position: absolute; 
    top: 100%; 
    left: 20px; } 

nav ul li:hover > ul { 
    display: block; } 

在此先感謝。

Answer 1

下拉菜單落下的<section class="main-content">內容後面，從而給你的頭一個更高z-index

header { 
    position: relative; 
    z-index: 2; 
}