懸停時顯示DIV子菜單下拉菜單

Question

我正嘗試使用DIV創建非常簡單的懸停/下拉菜單，沒有UL/LI。 我目前的代碼顯示菜單有3個選項，但我需要的是在鏈接2下有一個子菜單。 這是我目前的代碼。

.dropbtn { 
 
     background-color: #4CAF50; 
 
     color: white; 
 
     padding: 0px; 
 
     font-size: 12px; 
 
     border: none; 
 
     cursor: pointer; 
 
    } 
 
    
 
    .dropdown { 
 
     margin-top:200px; 
 
     position: relative; 
 
     display: inline-block; 
 
    } 
 
    
 
    .dropdown-content { 
 
     display: none; 
 
     position: absolute; 
 
     background-color: #f9f9f9; 
 
     min-width: 30px; 
 
     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; 
 
    } 
 
    
 
    .dropdown-content a:hover { 
 
     background-color: #f1f1f1; 
 
    } 
 
    
 
    .dropdown:hover .dropdown-content { 
 
     display: block; 
 
     bottom: 100%; 
 
    } 
 
    
 
    .dropdown:hover .dropbtn { 
 
     background-color: #3e8e41; 
 
    } 
 
    
 
    .subdiv { 
 
     display:none; 
 
    } 
 
    
 
    .dropdown:hover .subdiv { 
 
     display:block; 
 
    }

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

我想什麼做的是這樣的：

<div class="dropdown"> 
    <button class="dropbtn">^</button> 
    <div class="dropdown-content"> 
    <a href="#">Link 1</a> 
    <a href="#">Link 2</a> 
     <div class="submenu"> 
      <a href="#">SubLink 1</a> 
     </div> 
    <a href="#">Link 3</a> 
    </div> 
</div> 

凡SUBLINK 1項顯示，當你將鼠標懸停在鏈接2，但一切我都試過沒有按」工作，所以我希望別人可以幫助。

Answer 1

你可以用下面的方法做到這一點，你需要做的就是設置一個包含子菜單和懸停鏈接的div（這裏是submenu_holder），下一步很簡單，因爲它與submenu_holder比下拉。

.dropbtn { 
 
     background-color: #4CAF50; 
 
     color: white; 
 
     padding: 0px; 
 
     font-size: 12px; 
 
     border: none; 
 
     cursor: pointer; 
 
    } 
 
    
 
    .dropdown { 
 
     margin-top:200px; 
 
     position: relative; 
 
     display: inline-block; 
 
    } 
 
    
 
    .dropdown-content { 
 
     display: none; 
 
     position: absolute; 
 
     background-color: #f9f9f9; 
 
     min-width: 30px; 
 
     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; 
 
    } 
 
    
 
    .dropdown-content a:hover { 
 
     background-color: #f1f1f1; 
 
    } 
 
    
 
    .dropdown:hover .dropdown-content { 
 
     display: block; 
 
     bottom: 100%; 
 
    } 
 
    
 
    .dropdown:hover .dropbtn { 
 
     background-color: #3e8e41; 
 
    } 
 
    
 
    .subdiv { 
 
     display:none; 
 
    } 
 
    
 
    .dropdown:hover .subdiv { 
 
     display:block; 
 
    } 
 

 
.submenu { 
 
    display:none; 
 
    position:absolute; 
 
    left:60px; 
 
    top:0px; 
 
} 
 

 
.submenu_holder:hover .submenu { 
 
    display:block; 
 
} 
 

 
.submenu_holder { 
 
    position:relative; 
 
}

<div class="dropdown"> 
 
    <button class="dropbtn">^</button> 
 
    <div class="dropdown-content"> 
 
    <a href="#">Link 1</a> 
 
    <div class="submenu_holder"> 
 
     <a href="#">Link 2</a> 
 
     <div class="submenu"> 
 
     <a href="#">SubLink 1</a> 
 
     </div> 
 
    </div> 
 
    <a href="#">Link 3</a> 
 
    </div> 
 
</div>

Answer 2

你在你的代碼有幾個問題。

對於初學者來說，子菜單的類名不對應。

下面，我裹子菜單的內容鏈接2.在您需要作進一步的調整，使懸停效果更加平滑...

body { 
 
    /* for demo purposes */ 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    height: 100vh; 
 
} 
 

 
.dropbtn { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    padding: 0px; 
 
    font-size: 12px; 
 
    border: none; 
 
    cursor: pointer; 
 
    /* changed because the target was infuriatingly small for demo */ 
 
    padding: 1em; 
 
} 
 

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

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 30px; 
 
    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; 
 
} 
 

 
.dropdown-content a:hover, 
 
.submenu:hover { 
 
    background-color: #f1f1f1; 
 
} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
    bottom: 100%; 
 
} 
 

 
.dropdown:hover .dropbtn { 
 
    background-color: #3e8e41; 
 
} 
 

 
.submenu { 
 
    padding: 12px 16px; 
 
} 
 

 
.submenu-content { 
 
    display: none; 
 
} 
 

 
.submenu-content a { 
 
    padding: 12px 0; 
 
} 
 

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

<div class="dropdown"> 
 
    <button class="dropbtn">^</button> 
 
    <div class="dropdown-content"> 
 
    <a href="#">Link 1</a> 
 
    <a href="#">Link 2</a> 
 
    <a href="#">Link 3</a> 
 
    </div> 
 
</div> 
 
What I would like to do is this: 
 

 
<div class="dropdown"> 
 
    <button class="dropbtn">^</button> 
 
    <div class="dropdown-content"> 
 
    <a href="#">Link 1</a> 
 
    <div class="submenu">Link 2 
 
     <div class="submenu-content"> 
 
     <a href="#">SubLink 1</a> 
 
     </div> 
 
    </div> 
 
    <a href="#">Link 3</a> 
 
    </div> 
 
</div>

Answer 3

這是我最終使用的代碼，最適合我的情況：

<style> 

.dropbtn { 
    background-color: #4CAF50; 
    color: white; 
    padding: 0px; 
    font-size: 12px; 
    border: none; 
    cursor: pointer; 
} 

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

.dropdown-content { 
    display: none; 
    position: absolute; 
    background-color: #f9f9f9; 
    min-width: 30px; 
    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; 
} 

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

.dropdown:hover .dropdown-content { 
    display: block; 
    bottom: 100%; 
} 

.dropdown:hover .dropbtn { 
    background-color: #3e8e41; 
} 

.subdiv { 
    display:none; 
} 

.dropdown:hover .subdiv { 
    display:block; 
} 

.submenu { 
    display:none; 
    position:absolute; 
    left:86px; 
    top:0px; 
    background-color: #f9f9f9; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
    z-index: 1; 
} 

.submenu_holder:hover .submenu { 
    display:block; 
} 

.submenu_holder { 
    position:relative; 
} 

</style> 


<div class="dropdown"> 
    <button class="dropbtn">^</button> 
    <div class="dropdown-content"> 
    <a href="#">Link 1</a> 
    <div class="submenu_holder"> 
     <a href="#">Link 2</a> 
     <div class="submenu"> 
     <a href="#">SubLink 1</a> 
     </div> 
    </div> 
    <a href="#">Link 3</a> 
    </div> 
</div>