为什么这个下拉消失了？

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