下拉式粘性导航栏的问题

Question

我已经为此工作了几个小时，但我不明白为什么它不起作用，

我建立了一个导航栏，它位于页面顶部，其中有五个主要选项，当一个选项悬停时，其他相关选项会在悬停选项下下拉。

问题是它在大多数情况下都运行良好，但当涉及到其他元素（如图像、视频或音频）时，导航栏不会显示在该元素上，因此无法点击它或点击下拉菜单元素。

我是初学者，所以我不确定是否遗漏了一些明显的东西，但如果遗漏了请告诉我；）

此外，对于英文错误，我很抱歉，我尽力了: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>

Answer 1

您可以将 z-index 添加到 #navbar-container。
.videos与#navbar-container同级，但#navbar-container中没有z-index属性，所以在.videos元素后面。
z-index 子级别元素不适用于超级别元素。

#navbar-container {
  position: fixed;
  z-index: 9999;
}
#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>

下拉式粘性导航栏的问题

Issues with a dropdown sticky navbar

html

css

sticky

navbar

dropdown