我正试图找出我的下拉菜单(只有HTML、CSS(不起作用的原因。我正在使用经典的：悬停选项来更改显示：none到显示：flex。我的目标是当用户悬停在"；Unsee Produkte"；显示子菜单。在需要隐藏之前。如果有人能帮我，我会很高兴的。非常感谢。
/* Desktop Navigation Bar fixed*/
.hidden{
display:none;
flex-direction: column;
position: absolute;
z-index: -5;
background-color: #FFFEF9;
padding-left:2%;
padding-right:2%;
transition: all .375s;
}
.hidden a{
margin-top: 5%;
margin-bottom: 5%;
background-color: #FFFEF9;
}
.hidden a:hover{
color: #BF9D1D;
}
#produkt:hover > .hidden {
display:flex;
z-index: 888;
flex-direction: column;
position: absolute;
z-index: -5;
background-color: #FFFEF9;
padding-left:2%;
padding-right:2%;
transition: all .375s;
}<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="fixed-nav">
<div class="header">
<div class="col-1 head-1"></div>
<div class="col-3"></div>
<div class="col-1 sans-serif-caption xy">
<div class="header-box1 col-4 sans-serif-caption">
<li class="space"><a href="#UeberUns">Über Uns</a></li>
<li class="space hidden-1">
<a id="produkt">Unsere Produkte</a>
<ul class="hidden">
<a href="#">Unterfußdüngung mit KS NP MIX</a>
<a href="#">HARMI-SOIL 8.0/15 </a>
<a href="#">Agrimax Konzentrat</a>
</ul>
</li>
</div>
<div class="header-box2 col-4">
<li>
<image src="media/logo_2.svg" alt="logo"/>
</li>
</div>
<div class="header-box1 sans-serif-caption col-4">
<li class="sans-serif-caption space"><a href="#Kontakt">Kontakt</a></li>
<div class="search sans-serif-caption">
<input type="text" placeholder="Suche">
<image src="media/search-24px.svg" alt="search-icon" />
</div>
<div class="language-button row sans-serif-caption">
<image src="media/language-24px.svg" alt="language-icon" width="14px" height="14px"/>
<a>de</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>>quot；选择器指向直接的CHILD元素
在html中时，<a id="produkt">和CCD_ 2是兄弟姐妹
所以使用"而是选择同级元素。
像这样：
#produkt:hover ~ .hidden {
display:flex;
z-index: 888;
flex-direction: column;
position: absolute;
z-index: -5;
background-color: #FFFEF9;
padding-left:2%;
padding-right:2%;
transition: all .375s;
}