为什么这个下拉消失？

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; 
}