如何在导航栏中重新定位下拉菜单

Question

底部解释

HTML:

<div class = "navbar">
<a href = "index.php">NON-HOVER</a>
<div class="dropdown">
<a href = "index.php">HOVER</a>
<div class="dropdown-content"><a href = "index.php">DROPDOWN</a></div>
</div></div>

CSS：

.navbar {
overflow: visible;
background-color: #A10800;
position: fixed;
top: 0;
width: 100%;
}
.navbar a:hover {
background: #D1281F;
text-decoration: underline; 
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 8px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}

解释：

我想制作一个导航栏，该导航栏带有不重叠/覆盖的下拉菜单；HOVER"-bar。我不想切换出"；a">标记"；HOVER"；因为我也想要"；HOVER"；当我像"strong>"一样悬停在它上面时，它是可点击/可见的；NON-HOVER"。当您将鼠标悬停在"；然而"；，这使得"；"下降"；封面"；然而"；，而不是置于"；HOVER"；使得两者"；HOVER"；以及"；"下降"；可见且可点击。我如何重新定位"；"下降"/使其出现在"；HOVER"？

这里有一个更好的问题可视化：

当你没有悬停在任何上时

当你将鼠标悬停在"；HOVER"；

Answer 1

将.dropdownoverflow设置为visible，否则在容器外部时将看不到下拉菜单。设置.dropdownposition到relative和.dropdown-contenttop到100%，将其下移.dropdown元素的高度

.navbar {
overflow: visible;
background-color: #A10800;
position: fixed;
top: 0;
width: 100%;
}
.navbar a:hover {
background: #D1281F;
text-decoration: underline; 
}
.dropdown {
float: left;
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
top: 100%;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 8px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}

<div class = "navbar">
<a href = "index.php">NON-HOVER</a>
<div class="dropdown">
<a href = "index.php">HOVER</a>
<div class="dropdown-content"><a href = "index.php">DROPDOWN</a></div>
</div></div>

Answer 2

.navbar {
overflow: visible;
background-color: #A10800;
position: fixed;
top: 0;
width: 100%;
display: flex;
justify-content: left;
}
.navbar a:hover {
background: #D1281F;
text-decoration: underline; 
}
/*.dropdown {
float: left;
overflow: hidden;
}*/
.dropdown-content {
display: none;
position: absolute;
top: 100%;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}

<div class = "navbar">
<a href = "index.php">NON-HOVER</a>
<div class="dropdown">
<a href = "index.php">HOVER</a>
<div class="dropdown-content">
<a href = "index.php">DROPDOWN</a>
</div>
</div>
</div>