Я хочу создать вертикальное раскрывающееся меню со следующей структурой (для каждой «кнопки» отдельный «раскрывающийся» div). Идея заключается в том, что когда я наводю курсор на «кнопку», «раскрывающийся список» появляется над «кнопкой» того же размера («раскрывающийся список» сжимается до размера «кнопки» с одинаковой высотой «subnav1») или появляется слева от «раскрывающегося списка» (снова с равной высотой «subnav1» "). Проблема, однако, в том, что я не могу заставить «выпадающий» display: block навести курсор на «button» и, во втором случае, «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;
}