ホバリング時にDIVサブメニューのドロップダウンを表示

Question

DIVを使用する非常に単純なホバー/ドロップメニューを作成しようとしていますが、UL/LIはありません。 現在のコードでは3つのオプションがあるメニューが表示されますが、必要なのはリンク2の下にサブメニューがあることです。 ここに私の現在のコードがあります。

<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> 

あなたがリンク2にカーソルを合わせるとサブリンク1項目が現れ

が、私はdoesnの試みているすべてのもの」：私は何をしたいのはこれです

.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>

私は他の誰かが助けることを望んでいます。

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>