菜单链接不显示在菜单按钮下方

Question

我无法弄清楚这一点。我有一个水平导航，在菜单按钮内没有显示按钮下的子链接。请帮忙。谢谢。

<!--Click dropdown menu--> 
    <nav class="container"> 
      <button class="dropbtn" onclick="dropFile()">File</button> 
      <div id="myDropFile" class="dropdown-content"> 
       <a href="" >link 1</a> 
       <a href="">link 2</a> 
       <a href="">link 3</a> 
      </div> 
      <button class="dropbtn" onclick="dropEdit()">Edit</button> 
      <div id="myDropEdit" class="dropdown-content"> 
       <a href="" >link 4</a> 
       <a href="">link 5</a> 
       <a href="">link 6</a> 
      </div> 
      <button class="dropbtn" onclick="dropView()">View</button> 
      <div id="myDropView" class="dropdown-content"> 
       <a href="" >link 7</a> 
       <a href="">link 8</a> 
       <a href="">link 9</a> 
      </div> 
    </nav> 

然后我的CSS是：

.container { 
overflow: hidden; 
background-color: #333; 
font-family: Arial; 
} 

.container a { 
float: left; 
font-size: 16px; 
color: white; 
text-align: center; 
padding: 14px 16px; 
text-decoration: none; 
} 

.dropdown { 
float: left; 
overflow: hidden; 
} 

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

.dropbtn:hover { 
background-color: red; 
} 

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

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

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

.show { 
display: block; 

}

的菜单链接的第一菜单按钮，而不是每一个特定的按钮下方显示下显示所有。我已经尝试了一切，并阅读了以前的所有答案。

Answer 1

您需要有一条规则影响您所徘徊的button的兄弟div。例如：

.dropbtn:hover + .dropdown-content, .dropdown-content:hover { 
    display: inline-block; 
    position: absolute; 
    top: 53px; 
    right: inherit; 
    margin-left: -60px; 
} 

但是，需要修改下拉列表的位置。我去看看，如果我可以把一个运行实例

修订：

调整定位，以及（更新规则上图）。见运行示例下面

.container { 
 
    overflow: hidden; 
 
    background-color: #333; 
 
    font-family: Arial; 
 
} 
 

 
.container a { 
 
    float: left; 
 
    font-size: 16px; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
.dropdown { 
 
    float: left; 
 
    overflow: hidden; 
 
} 
 

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

 
.dropbtn:hover { 
 
    background-color: red; 
 
} 
 

 
.dropbtn:hover + .dropdown-content, .dropdown-content:hover { 
 
    display: inline-block; 
 
    position: absolute; 
 
    top: 53px; 
 
    right: inherit; 
 
    margin-left: -60px; 
 
} 
 

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

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

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

 
.show { 
 
    display: block; 
 
}

<!--Click dropdown menu--> 
 
<nav class="container"> 
 
    <button class="dropbtn" onclick="dropFile()">File</button> 
 
    <div id="myDropFile" class="dropdown-content"> 
 
    <a href="">link 1</a> 
 
    <a href="">link 2</a> 
 
    <a href="">link 3</a> 
 
    </div> 
 
    <button class="dropbtn" onclick="dropEdit()">Edit</button> 
 
    <div id="myDropEdit" class="dropdown-content"> 
 
    <a href="">link 4</a> 
 
    <a href="">link 5</a> 
 
    <a href="">link 6</a> 
 
    </div> 
 
    <button class="dropbtn" onclick="dropView()">View</button> 
 
    <div id="myDropView" class="dropdown-content"> 
 
    <a href="">link 7</a> 
 
    <a href="">link 8</a> 
 
    <a href="">link 9</a> 
 
    </div> 
 
</nav>