为什么这个下拉列表消失了？

Question

我正在处理这个相当简单的下拉菜单，但我无法弄清楚为什么当您将鼠标悬停在第一个 link?

上时下拉菜单会消失

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"> 内容后面下降，因此请给您的 header 更高的 z-index

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

为什么这个下拉列表消失了？

Why does this dropdown dissapear?

html

css

dropdown