导航栏中的下拉菜单卡住了

Question

我正在尝试制作带有下拉菜单的导航栏。我希望 'Clips' 有一个包含 3 link 的下拉菜单。但我似乎无法让它发挥作用。如果我将位置设置为绝对位置，当我将其更改为相对位置时，它们会堆叠在彼此之上，然后它们会进入 link。有人可以帮忙吗？我必须更改选择器吗？

提前致谢！

.navbar{
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 18px;
  background-color: darkred;
}

.nav-list{
  list-style-type: none;
}

.dropdown{
  position: relative;
  display: inline-block;
  list-style-type: none;
  padding: 10px 10px;
  border: solid black 1px;
  border-radius: 10px;
  margin: 2px;
}

.dropdown ul li{
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: darkred;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 10;
  overflow: visible;
}

.dropdown-content a {
  color: black;
  padding: 12px 18px;
  text-decoration: none;
  display: block;
}


.dropdown:hover .dropdown-content {
  display: block;
}


.nav-list .list-item {
  display: inline-block;
  padding: 10px 10px;
  border: solid black 1px;
  border-radius: 10px;
  margin: 2px;
}

.navbar a{
  text-decoration: none;
  color: white;
  font-family: 'arvo', italic;
}

.logo{
  height: 60px;
  position: relative;
  margin: 5px 0px 5px 17px;
}

.logo_text {
 position: absolute;
 top: 50px;
 font-size: 12pt;
 color: white;
}

<body>
        <header>
            <nav class="navbar">
                <div>
                    <img class="logo" src="img/FrankLogo.svg"> <h3 class="logo_text"><a href=index.html>FRANKIE</a></h3>
                    </div>
                <ul class="nav-list">
                    <li class="dropdown"><a href="">Clips</a>
                    <ul>
                        <li class="dropdown-content"><a href="">Frankie Anthem</a></li>
                        <li class="dropdown-content"><a href="">Vrouwtjes</a></li>
                    </ul></li>
                    <li class="list-item"><a href="">Shows</a></li>
                    <li class="list-item"><a href="">Vieze Victor</a></li>
                    <li class="list-item"><a href="">Contact</a></li>
                </ul>
            </nav>
        </header>

Answer 1

在顶部菜单中设置 UL 位置

  li.dropdown > ul {
    position: absolute;
    margin-left: 0 !important;
    padding-left: 0;
    top: 40px;
    }

导航栏中的下拉菜单卡住了

Dropdown menu in navbar getting stuck

html

css

dropdown

navbar