垂直方向のドロップダウンメニューには、サブメニューが表示されます。

Question

次のような構造を持つ垂直方向のドロップダウンメニューを作成したいと思います（それぞれの "ボタン"ごとに異なる "ドロップダウン" div）。 "ボタン"同じサイズの「ボタン」に同じの「ボタン」の上にと表示されます（同じ高さの「ボタン」サイズに縮小されます）が「ドロップダウン」（同じ高さ " subnav1 "）。しかし問題は、私が "button"ホバー上のブロックの表示を "ドロップダウン" にすることができないことです。そして、 "subnav1"要素を選択している間に、 "ボタン"を押してください。 HTML：

<div class="nav"> 
    <ul class="nav1"> 
     <li class="button"><div class="subnav">BUTTON1</div></li> 
     <li class="button"><div class="subnav">BUTTON2</div></li> 
     <li class="button"><div class="subnav">BUTTON3</div><li> 
     <li class="button"><div class="subnav">BUTTON4</div></li> 
     <li class="button"><div class="subnav">BUTTON5</div></li> 
    </ul></div> 
    <div class="dropdown"> 
     <A href="#" class="subnav1">SUBBUTTON1</a> 
     <A href="#" class="subnav1">SUBBUTTON1</a> 
     <A href="#" class="subnav1">SUBBUTTON1</a> 
    </div> 

CSS：

.nav { 
    width: 180px; 
    padding: 1vm; 
    float:left; 
    height:450px; 
    position:relative; 
    text-align:center; 
    background-color:#a56d3b; 
} 
ul{ 
    list-style:none; 
    margin: 0; 
    padding: 0; 
    text-align:right; 
} 
.nav a{ 
    text-decoration:none; 

} 
.subnav{ 
    font-weight:bold; 
    text-align:center; 
    color:#FCFBE3; 
    font-family: 'PT Serif', serif; 
    font-size:1.3em; 
    display:block; 
} 
.button{ 
    border-bottom:1PX DOTTED #FFECBA; 
    border-right:1PX DOTTED #FFECBA; 
    height:90px; 
    width:100%; 
    padding:2em 0 0 0 ; 
    cursor:pointer; 
} 
.button:last-child{ 
    border-bottom:0px; 
} 
.button:hover{ 
    background-color:rgba(0,0,0,0.5); 
} 
.dropdown{ 
    height:89px; 
    float:left; 
    width:auto; 
    min-width:100px; 
    text-align:center; 
    margin:0 180px; 
    position:absolute; 
    cursor:pointer; 
    border:1px solid black; 

} 

.subnav1{ 
    height:30px; 
    width:180px; 
    padding:5px 0; 
    color:black; 
    font-family: 'PT Serif', serif; 
    font-size:1em; 
    color:white; 
    text-decoration:none; 
    background-color:#D8A06E; 
     DISPLAY:BLOCK; 
} 
.subnav1:hover{ 
    background-color:rgba(0,0,0,0.5); 
} 
.nav.nav1 .button:hover .dropdown{ 
    display:block; 
} 

Answer 1

あなたがHTMLナビゲーションの絶対に間違ったマークアップを使用している、正しい、有効な構造は次のとおりです。

<nav class="nav"> 
    <ul> 
    <li> 
     <a href="">1st Level</a> 
     <ul> 
     <li><a href="">2nd Level</a></li> 
     <li><a href="">2nd Level</a></li> 
     <li><a href="">2nd Level</a></li> 
     </ul> 
    </li> 
    <li> 
     <a href="">1st Level</a> 
     <ul> 
     <li><a href="">2nd Level</a></li> 
     <li><a href="">2nd Level</a></li> 
     <li><a href="">2nd Level</a></li> 
     </ul> 
    </li> 
    <li> 
     <a href="">1st Level</a> 
     <ul> 
     <li><a href="">2nd Level</a></li> 
     <li><a href="">2nd Level</a></li> 
     <li><a href="">2nd Level</a></li> 
     </ul> 
    </li> 
    </ul> 
</nav> 

し、それは簡単です。パイとして、スタイリング：

.nav { 
    display: block; 
    font-family: sans-serif; 
} 
.nav ul { 
    padding: 0; 
    list-style: none; 
} 
.nav ul li { 
    display: inline-block; 
    position: relative; 
    white-space: nowrap; 
} 
.nav ul li a { 
    display: block; 
    padding: 8px 16px; 
    text-decoration: none; 
    color: #000000; 
} 
.nav ul li ul { 
    display: none; 
    position: absolute; 
    top: 100%; 
    left: 0; 
    border: 1px solid #000000; 
} 
.nav ul li ul li { 
    display: block; 
} 
.nav ul li:hover ul { 
    display: block; 
} 

このフィドルを参照してくださいhttps://jsfiddle.net/vtt0qnpt/

は、私は、これはあなたがそれを可能にする方法だと思います

Answer 2

をお楽しみください。

.dropbtn { 
 
    background-color: #E61094; 
 
    color: white; 
 
    padding: 16px; 
 
    font-size: 16px; 
 
    border: none; 
 
    cursor: pointer; 
 
} 
 

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

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

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

 
.dropdown-content a:hover { 
 
\t background-color: #9E1192 
 
} 
 

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

 
.nav:hover .dropbtn { 
 
    background-color: #F576EA; 
 
}

<div class="nav"> 
 
    <button class="dropbtn">Dropdown 1</button> 
 
    <div class="dropdown-content"> 
 
    <a href="#">Subbutton 1</a> 
 
    <a href="#">Subbutton 2</a> 
 
    <a href="#">Subbutton 3</a> 
 
    </div> 
 
</div> 
 

 
<div class="nav"> 
 
    <butoon class="dropbtn">Dropdown 2</button> 
 
    <div class="dropdown-content"> 
 
    <a href="#">Subbutton 1</a> 
 
    <a href="#">Subbutton 2</a> 
 
    <a href="#">Subbutton 3</a> 
 
    </div> 
 
</div> 
 

 
<div class="nav"> 
 
    <butoon class="dropbtn">Dropdown 3</button> 
 
    <div class="dropdown-content"> 
 
    <a href="#">Subbutton 1</a> 
 
    <a href="#">Subbutton 2</a> 
 
    <a href="#">Subbutton 3</a> 
 
    </div> 
 
</div> 
 

 
<div class="nav"> 
 
    <butoon class="dropbtn">Dropdown 4</button> 
 
    <div class="dropdown-content"> 
 
    <a href="#">Subbutton 1</a> 
 
    <a href="#">Subbutton 2</a> 
 
    <a href="#">Subbutton 3</a> 
 
    </div> 
 
</div> 
 

 
<div class="nav"> 
 
    <butoon class="dropbtn">Dropdown 5</button> 
 
    <div class="dropdown-content"> 
 
    <a href="#">Subbutton 1</a> 
 
    <a href="#">Subbutton 2</a> 
 
    <a href="#">Subbutton 3</a> 
 
    </div> 
 
</div>