【发布时间】：2021-12-24 10:27:39
【问题描述】：
我已经为此工作了几个小时，但我无法弄清楚为什么它不起作用，
我已经构建了一个导航栏，该导航栏位于页面顶部，其中包含五个主要选项，当一个选项悬停时，其他相关选项会在悬停选项下下拉。
问题是它在大多数情况下都能正常工作，但是当涉及到图像、视频或音频等其他元素时，导航栏不会显示在该元素上，并且无法单击它或下拉元素。
我是初学者，所以我不确定我是否遗漏了一些明显的东西，但如果我遗漏了请告诉我;)
另外，对于英文错误，我正在努力：D
#navbar-container {
position: fixed;
}
#navbar-principale {
background: #4e6eff;
font-size: 20px;
list-style-type: none;
overflow: hidden;
z-index: 10;
text-transform: uppercase;
}
.navbar-principale-option {
width: 20vw;
float: left;
font-weight: bold;
border-right: 2px solid white;
}
.navbar-principale-option:first-child {
border-left: 2px solid white;
}
.navbar-principale-option a {
display: block;
color: #fff;
width: 20vw;
padding: 1vh 0;
text-align: center;
text-decoration: none;
}
.navbar-principale-option:hover {
background: #3a56d3;
}
.navbar-principale-option:hover .navbar-selection {
visibility: visible;
}
.navbar-selection {
visibility: hidden;
position: absolute;
background: #4e6eff;
width: calc(20vw + 2px);
margin-left: -2px;
text-transform: none;
box-sizing: content-box;
z-index: 10;
}
.navbar-selection-option:hover {
box-sizing: content-box;
background-color: #3a56d3;
border: 2px solid white;
border-top: none;
border-bottom: none;
}
.navbar-selection-option:last-child a:hover {
border-bottom: 2px solid white;
}
.videos {
display: flex;
justify-content: space-around;
}<div id="navbar-container">
<ul id="navbar-principale">
<li class="navbar-principale-option">
<a href="#top">Option 0</a>
</li>
<li class="navbar-principale-option">
<a href="#membres-selection">Option 1</a>
<div class="navbar-selection">
<div class="navbar-selection-option">
<a href="#membres-officiels">
<p>Option 1-1</p>
</a>
</div>
<div class="navbar-selection-option">
<a href="#membres-externes">
<p>Option 1-2</p>
</a>
</div>
</div>
</li>
<li class="navbar-principale-option">
<a href="#voyages">Option 2</a>
<div class="navbar-selection">
<div class="navbar-selection-option">
<a href="#italie2019">
<p>Option 2-1</p>
</a>
</div>
<div class="navbar-selection-option">
<a href="#bretagne2020">
<p>Option 2-2</p>
</a>
</div>
<div class="navbar-selection-option">
<a href="#bretagne2021">
<p>Option 2-3</p>
</a>
</div>
</div>
</li>
<li class="navbar-principale-option">
<a href="#histoire">Option 3</a>
<div class="navbar-selection">
<div class="navbar-selection-option">
<a href="#df-culte">
<p>Option 3-1</p>
</a>
</div>
<div class="navbar-selection-option">
<a href="#df-memes">
<p>Option 3-2</p>
</a>
</div>
</div>
</li>
<li class="navbar-principale-option">
<a href="#bonus">Option 4</a>
<div class="navbar-selection">
<div class="navbar-selection-option">
<a href="#musiques">
<p>Option 4-1</p>
</a>
</div>
<div class="navbar-selection-option">
<a href="#covers">
<p>Option 4-2</p>
</a>
</div>
<div class="navbar-selection-option">
<a href="#bonus-autres">
<p>Option 4-3</p>
</a>
</div>
</div>
</li>
</ul>
</div>
<br>
<br>
<div class="videos">
<video controls="controls" width="567px" height="280">
<source id="landing-video">
</video>
<video controls="controls" width="567px" height="280px">
<source id="landing-video">
</video>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<audio controls>
<source type="audio/mp3">
</audio>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p> to create some space to scroll </p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>【问题讨论】：
标签： html css dropdown navbar sticky