html - 为什么这个下拉菜单消失了？

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