html - 如何让我的第二层导航出现在悬停时？

Question

我有一个导航栏，包括我的主页、菜单和照片库。在实际的物理菜单中，我有 5 个页面，其中包含不同的菜单项，当我将鼠标悬停在 Menu 上时，我希望有一个包含所有这些页面的下拉菜单。当我将鼠标悬停在菜单按钮上时，display: block; 将不会运行。有什么解决办法吗？

我的 HTML:

<nav> <!-- Navigation -->
    <hr>
    <a href="Big Duck.html">Home</a>        
    <a class="MenuDropdown">Menu</a>
    <a href="Photogallery.html">Photogallery</a>

        <div class="DropdownButtons"> <!-- Dropdown navigation -->
            <a href="MulticourseMeals">Multicourse Meals</a>
            <a href="Appetizers">Appetizers</a>
            <a href="Soups">Soups</a>
            <a href="Entrees">Entrees</a>
            <a href="SidePlates">Side Plates</a>
            <a href="Desserts">Desserts</a>
        </div>

</nav>  

我的 CSS:

.DropdownButtons {
    display: none; /* To hide the five page button menu */

    text-align: center;
    width: 100vw;

    margin: 0px;
    padding: .2% 0% .2% 0%;

    transition: 0.3s;

    position: fixed;
    top: 5.7%;
    background-color: hsla(9 , 57%, 60%, 1);
}

.DropdownButtons a {
    font-family: 'Didact Gothic', sans-serif;
    font-size: 170%;
    color: hsla(48, 70%, 63%, 1);
    text-decoration: none;

    margin: 0% .5% 0% .5%;
    padding: .2% .5% .2% .5%;

    transition: 0.3s;
}

.MenuDropdown:hover .DropdownButtons {
    display: block; /* To show the 5 page button menu */
}

Answer 1

那是因为您当前使用的 css 选择假设菜单是链接的子项。你要找的是通用兄弟选择器

.MenuDropdown:hover ~ .DropdownButtons

您还应该将 css 规则应用于 .DropdownButtons:hover，以便菜单对用户保持打开状态。下面是一个工作片段

.DropdownButtons {
    display: none; /* To hide the five page button menu */

    text-align: center;
    width: 100vw;

    margin: 0px;
    padding: .2% 0% .2% 0%;

    transition: 0.3s;

    position: fixed;
    top: 5.7%;
    background-color: hsla(9 , 57%, 60%, 1);
}

.DropdownButtons a {
    font-family: 'Didact Gothic', sans-serif;
    font-size: 170%;
    color: hsla(48, 70%, 63%, 1);
    text-decoration: none;

    margin: 0% .5% 0% .5%;
    padding: .2% .5% .2% .5%;

    transition: 0.3s;
}

.MenuDropdown:hover ~ .DropdownButtons, .DropdownButtons:hover  {
    display: block; /* To show the 5 page button menu */
}

<nav> <!-- Navigation -->
    <hr>
    <a href="Big Duck.html">Home</a>        
    <a class="MenuDropdown">Menu</a>
    <a href="Photogallery.html">Photogallery</a>

        <div class="DropdownButtons"> <!-- Dropdown navigation -->
            <a href="MulticourseMeals">Multicourse Meals</a>
            <a href="Appetizers">Appetizers</a>
            <a href="Soups">Soups</a>
            <a href="Entrees">Entrees</a>
            <a href="SidePlates">Side Plates</a>
            <a href="Desserts">Desserts</a>
        </div>

</nav>