时间戳

首页 > 解决方案 > 为什么我的子菜单没有显示定义的悬停变化？

html - 为什么我的子菜单没有显示定义的悬停变化？

问题描述

我试图找出我的下拉菜单（仅 HTML、CSS）不起作用的原因。我正在使用经典的:hover选项来更改显示：无；显示：弹性；. 我的目标是，当用户将鼠标悬停在“Unsere 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>

标签： htmlcsshover

解决方案

">" 选择器指向一个直接的 CHILD 元素。
虽然在你的 html 中， <a id="produkt"> 并且 <ul class="hidden">是兄弟姐妹。
所以使用“~”代替，它选择兄弟元素。

像这样：

#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;
}

推荐阅读