我想用以下结构制作一个垂直下拉菜单(对于每个“按钮”一个不同的“下拉” div)。这个想法是当我将“按钮”悬停时，“下拉”以相同的方式出现在“按钮”上大小 (“下拉列表”缩小为高度“ subnav1”相等的“按钮”大小)或显示在“下拉列表”的左侧 (再次具有“ subnav1”高度相等)。 但是，问题是我无法显示 “下拉” ：在“按钮”悬停时阻止 s，在第二种情况下，选择“ subnav1”元素时要悬停“按钮”。 HTML：

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;

}