导航栏下拉列表不会出现

Question

在我的网站上，我创建了一个NavBar文件，并将其与php一起包含在我想要的每个其他php文件中。现在我的导航栏文件里面有一个下拉列表：

 if (this._token) {
     headers.set('Authorization', this._token);
 }

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  cursor: pointer;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  min-width: 160px;
  box-shadow: white;
  z-index: 1;
  cursor: pointer;
}

.dropdown-inbuttons {
  border: none;
  padding: 6px 12px;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  background-color: white;
  color: black;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  background-color: white;
  min-width: 160px;
  box-shadow: white;
  z-index: 1;
  cursor: pointer;
}

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

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

当我将鼠标放到dropbtn上时，它显示了这个：

我知道为什么会发生这种情况，因为下拉内容位于导航栏和代码导航栏<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="w3-top"> <div class="w3-bar w3-black w3-card" style="height: 58px"> <!-- Give attension here --> //.....other code....// <div class="dropdown" style="margin-top: 6px;"> <button class="dropbtn"> <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="../../../../registration/_includes/logout-system.php">Log Out</a> </div> </div> </div> </div>内，并且不适合。那么如何让我的下拉列表显示在其他html文件的前面？

我用这种方式导入其他php文件中的导航栏：

height = 58px

Answer 1

第一种方法：overflow:hidden覆盖.w3-bar的{​​{1}}。

第二种方法：将overflow:visible课程的position: relative更改为.dropdown，并将position: static包装到另一个div并将<div class="dropdown">...</div>添加到其中。

他们两个都会奏效。选择适合你的任何东西。

Answer 2

＆＃13;

＆＃13;

.dropbtn {
    background-color: transparent;
    color: #fff;
    padding: 16px;
    font-size: 16px;
    border: none;
}

.dropdown {
    position: relative;
    display: inline-block;
}

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

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.bar {
    background: black;
    color: #fff;
}

.dropdown-content a:hover {background-color: #ddd;}

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

.dropdown:hover .dropbtn {background-color: transparent;}

＆＃13;

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


  
  <div class="bar">
  //.....other code....//
<div class="dropdown">
  <button class="dropbtn"><i class="fa fa-caret-down"></i></button>

  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>
 </div>
 </div>

＆＃13;

＆＃13;

＆＃13;