メニューリンクの下にメニューリンクが表示されない

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>

以下

サンプルを実行している参照してください。