如何协调下拉列表的 CSS 事件 :hover 与更改颜色的 :hover 事件？

Question

所以我正在以极其有限的经验编写我的第一个网站。 当鼠标悬停在导航栏项目链接上时，它们会变成红色并带有下划线。然而，下拉菜单的悬停事件设置为项目框而不是链接本身，因此时间很奇怪。每当我尝试将事件设置为导航链接时，下拉菜单都会完全停止工作。

我能做什么？

HTML：

<nav id="mainNavbar" class="navbar navbar-dark navbar-expand-md py-0 fixed-top">

    <div class="collapse navbar-collapse" id="navLinks">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a href="homePage.html" class="nav-link">
                    HOME
                </a>
            </li>
            <li class="nav-item">
                <a href="" class="nav-link">
                    SPEAKERS
                </a>
            </li>
            <!--DROPDOWN-->
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="resourcesDropdown" role="button"
                   data-toggle="dropdown">
                    RESOURCES
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="Water.html">Water</a>
                    <a class="dropdown-item" href="Energy.html">Energy</a>
                    <a class="dropdown-item" href="#">Flora</a>
                    <a class="dropdown-item" href="Construction.html">Construction</a>
                    <a class="dropdown-item" href="#">Food</a>
                </div>
            </li>

CSS：

#mainNavbar .nav-link {
    color: white;
    font-family: "Playfair Display", serif;
}

#mainNavbar .nav-link:hover {
    color: #ea1c2c;
    text-decoration: underline solid;
}




/* Show the dropdown menu on hover */
.nav-item:hover .dropdown-menu {
    color: #ea1c2c;
    display: block;
    border-radius:10%;
    margin-left: 20%;
    box-shadow: black 0px 3px 3px;
}

/* Style for dropdown links */
.dropdown-menu a {
    color: #345535;
    font-size: 1.5em;
    display: block;
}

/* Change style of dropdown links on hover */
.dropdown-menu a:hover {
    background-color: #ddd;
    color:red;
    font-size:1.6em;
}

我预计将这两个事件设置为导航链接会起作用，但它破坏了我的下拉菜单。我尝试玩弄它，但我在黑暗中跌跌撞撞。

Answer 1

所以我相信这就是你想要你的代码做的事情。

有一些事情，当您有下拉菜单时，您应该首先将下拉菜单设置为

display:none;

，然后当您将鼠标悬停在链接上时，您可以使用

>

运算符指向下拉菜单并将其显示为块。

看看我在这里做了什么：

#mainNavbar .nav-link {
    color: blue;
    font-family: "Playfair Display", serif;
}

#mainNavbar .nav-link:hover {
    color: #ea1c2c;
    text-decoration: underline solid;
}

.dropdown-menu {
  display: none;
}


/* Show the dropdown menu on hover */
.nav-item:hover > .dropdown-menu{
    color: #ea1c2c;
    display: block;
    border-radius:10%;
    margin-left: 20%;
    box-shadow: black 0px 3px 3px;
}

/* Style for dropdown links */
.dropdown-menu a {
    color: #345535;
    font-size: 1.5em;
    display: block;
}

/* Change style of dropdown links on hover */
.dropdown-menu a:hover {
    background-color: #ddd;
    color:red;
    font-size:1.6em;
}

<nav id="mainNavbar" class="navbar navbar-dark navbar-expand-md py-0 fixed-top">

    <div class="collapse navbar-collapse" id="navLinks">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a href="homePage.html" class="nav-link">
                    HOME
                </a>
            </li>
            <li class="nav-item">
                <a href="" class="nav-link">
                    SPEAKERS
                </a>
            </li>
            <!--DROPDOWN-->
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="resourcesDropdown" role="button"
                   data-toggle="dropdown">
                    RESOURCES
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="Water.html">Water</a>
                    <a class="dropdown-item" href="Energy.html">Energy</a>
                    <a class="dropdown-item" href="#">Flora</a>
                    <a class="dropdown-item" href="Construction.html">Construction</a>
                    <a class="dropdown-item" href="#">Food</a>
                </div>
            </li>
            </ul>
            </div>
            </nav>