为什么这个下拉菜单消失了？答案

【问题标题】：Why does this dropdown dissapear?为什么这个下拉菜单消失了？
【发布时间】：2015-10-15 14:27:41
【问题描述】：

我正在处理这个相当简单的下拉菜单，但我无法弄清楚为什么当您将鼠标悬停在第一个链接上时下拉菜单会消失？

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

提前致谢。

【问题讨论】：

标签： html css dropdown

【解决方案1】：

下拉菜单在<section class="main-content"> 内容后面下拉，所以给你的标题一个更高的z-index

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

【讨论】：

看起来不错，尽管我会在您的导航锚点中添加 display: block。 nav a{display: block;}