如何在 drop-down 菜单链接上保持悬停状态

Question

所以我有这个 drop-down 菜单，但是当我将鼠标悬停在它上面时我无法让它停留。当我将鼠标悬停在按钮上时，菜单会出现，但当我将鼠标悬停在 drop-down 菜单中的链接上时，它会消失。我试图通过更改悬停属性并包含 Li 标签来修复它，但是当我使用悬停更改代码部分时没有任何效果，菜单不再显示。我认为这与 parents 和 child 内容有关，但我不确定。提前致谢！

.nav {
  position: absolute;
  left: 0;
  top: 0;
  height: 20%;
  width: 98%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav_links  {
  display: flex;
  justify-content: space-around;
  padding: 20px;
  margin-top: 250px;
  align-items: center;
  width: 45%;
  margin: left;
}

.nav_links ul li{
  padding: 12px 12px;
}

.nav_links button{
  font-size: 25px;
  font-family: Segoe UI;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
}

.nav_links button:hover{
  color: #67c4fab2;
  transition: 0.4s;
}

.college_btn ul, .vie_btn ul, .services_btn ul, .portail_btn ul{
position: relative;
width: 155px;
height: 270px;
left: 0;
right: 0;
text-align: center;
background-color: white;
border-radius: 7px;
pointer-events: none;
list-style: none;
justify-content: space-around;
align-items: center;
flex-direction: column;
opacity: 0;
pointer-events: none;
transform: translateY(0px);
transition: all 0.4s ease;
}

.college_btn a, .vie_btn a, .services_btn a, .portail_btn a{
  text-decoration: none;
  color: black;
}

.college_btn ul{
  left:-15px;
  text-decoration: none;
}
.vie_btn ul{
  left:-10px;
}
.services_btn ul{
  left:-30px;
  height: 320px;
  margin-bottom: -50px;
}

.portail_btn ul{
  left:-40px;
  height: 320px;
  margin-bottom: -70px;
  padding: 10px 1px;
}

/*This part is doing the hover and showing the menu*/
.nav_links button:hover + ul{
  display: block;
  opacity: 1;
  pointer-events: all;
  transform: translateY(10px);
}

body{background-color: black;}

    <section class="header">
        <nav>
            <a href="Index.html" id="logo"><img src="Images/cflogo_main.png"></a>
            <div class="nav_links">
                <div class="college_btn">
                    <button>Le collège</button>
                    <ul>
                        <li><a href="#">Mot de la direction</a></li>
                        <li><a href="#">Historique</a></li>
                        <li><a href="#">Les enseignants</a></li>
                        <li><a href="#">Calendrier scolaire</a></li>
                        <li><a href="#">Fondation</a></li>
                    </ul>
                </div>

                <div class="vie_btn">
                    <button>Vie scolaire</button>
                    <ul>
                        <li><a href="#">Activités parascolaires</a></li>
                        <li><a href="#">Centre d'aide</a></li>
                        <li><a href="#">Passports pour la réussite</a></li>
                        <li><a href="#">Voyages</a></li>
                        <li><a href="#">Chorale</a></li>
                    </ul>
                </div>

                <div class="services_btn">
                    <button>Services</button>
                    <ul>
                        <li><a href="#">Transport</a></li>
                        <li><a href="#">Cafétéria</a></li>
                        <li><a href="#">Assurance</a></li>
                        <li><a href="#">Uniforme scolaire</a></li>
                        <li><a href="#">Orientation</a></li>
                        <li><a href="#">Intervenante</a></li>
                        <li><a href="#">Cours d'été</a></li>
                    </ul>
                </div>

                <div class="portail_btn">
                    <button>Portail</button>
                    <ul>
                        <li href="">Coba</li>
                        <li href="">Google Classroom</li>
                        <li href="">Challenge U</li>
                        <li href="">Courriel (Admin)</li>
                        <li href="">Courriel (Élève)</li>
                        <li href="">Services aux élèves</li>
                    </ul>
                </div>

            </div>

        </nav>

Answer 1

改为在按钮的父元素上使用 :hover：

.nav {
  position: absolute;
  left: 0;
  top: 0;
  height: 20%;
  width: 98%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav_links  {
  display: flex;
  justify-content: space-around;
  padding: 20px;
  margin-top: 250px;
  align-items: center;
  width: 45%;
  margin: left;
}

.nav_links ul li{
  padding: 12px 12px;
}

.nav_links button{
  font-size: 25px;
  font-family: Segoe UI;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
}

.nav_links button:hover{
  color: #67c4fab2;
  transition: 0.4s;
}

.college_btn ul, .vie_btn ul, .services_btn ul, .portail_btn ul{
position: relative;
width: 155px;
height: 270px;
left: 0;
right: 0;
text-align: center;
background-color: white;
border-radius: 7px;
pointer-events: none;
list-style: none;
justify-content: space-around;
align-items: center;
flex-direction: column;
opacity: 0;
pointer-events: none;
transform: translateY(0px);
transition: all 0.4s ease;
}

.college_btn a, .vie_btn a, .services_btn a, .portail_btn a{
  text-decoration: none;
  color: black;
}

.college_btn ul{
  left:-15px;
  text-decoration: none;
}
.vie_btn ul{
  left:-10px;
}
.services_btn ul{
  left:-30px;
  height: 320px;
  margin-bottom: -50px;
}

.portail_btn ul{
  left:-40px;
  height: 320px;
  margin-bottom: -70px;
  padding: 10px 1px;
}

/*This part is doing the hover and showing the menu*/
.nav_links > div:hover button + ul{
  display: block;
  opacity: 1;
  pointer-events: all;
  transform: translateY(10px);
}

body{background-color: black;}

<section class="header">
        <nav>
            <a href="Index.html" id="logo"><img src="Images/cflogo_main.png"></a>
            <div class="nav_links">
                <div class="college_btn">
                    <button>Le collège</button>
                    <ul>
                        <li><a href="#">Mot de la direction</a></li>
                        <li><a href="#">Historique</a></li>
                        <li><a href="#">Les enseignants</a></li>
                        <li><a href="#">Calendrier scolaire</a></li>
                        <li><a href="#">Fondation</a></li>
                    </ul>
                </div>

                <div class="vie_btn">
                    <button>Vie scolaire</button>
                    <ul>
                        <li><a href="#">Activités parascolaires</a></li>
                        <li><a href="#">Centre d'aide</a></li>
                        <li><a href="#">Passports pour la réussite</a></li>
                        <li><a href="#">Voyages</a></li>
                        <li><a href="#">Chorale</a></li>
                    </ul>
                </div>

                <div class="services_btn">
                    <button>Services</button>
                    <ul>
                        <li><a href="#">Transport</a></li>
                        <li><a href="#">Cafétéria</a></li>
                        <li><a href="#">Assurance</a></li>
                        <li><a href="#">Uniforme scolaire</a></li>
                        <li><a href="#">Orientation</a></li>
                        <li><a href="#">Intervenante</a></li>
                        <li><a href="#">Cours d'été</a></li>
                    </ul>
                </div>

                <div class="portail_btn">
                    <button>Portail</button>
                    <ul>
                        <li href="">Coba</li>
                        <li href="">Google Classroom</li>
                        <li href="">Challenge U</li>
                        <li href="">Courriel (Admin)</li>
                        <li href="">Courriel (Élève)</li>
                        <li href="">Services aux élèves</li>
                    </ul>
                </div>

            </div>

        </nav>

Answer 2

.header>nav{
  background-color:#cdcdcd;
  display:flex;
  align-items:center;
  height:50px;
}
nav #logo>img {
  height:40px;
}
.nav_links{
  display:flex;
}

/*make hover*/
.nav_links>div>ul{
  max-height: 0vh;
  overflow: hidden;
  position: absolute;
  background-color:#dedede;
  transition: 0.5s;
}
.nav_links>div:hover ul{
  max-height: 80vh;
}

<section class="header">
    <nav>
        <a href="https://www.heisoe.com" id="logo"><img src="https://api.heinsoe.com/v3/index.svg"></a>
        <div class="nav_links">
            <div class="college_btn">
                <button>Le collège</button>
                <ul>
                    <li><a href="#">Mot de la direction</a></li>
                    <li><a href="#">Historique</a></li>
                    <li><a href="#">Les enseignants</a></li>
                    <li><a href="#">Calendrier scolaire</a></li>
                    <li><a href="#">Fondation</a></li>
                </ul>
            </div>

            <div class="vie_btn">
                <button>Vie scolaire</button>
                <ul>
                    <li><a href="#">Activités parascolaires</a></li>
                    <li><a href="#">Centre d'aide</a></li>
                    <li><a href="#">Passports pour la réussite</a></li>
                    <li><a href="#">Voyages</a></li>
                    <li><a href="#">Chorale</a></li>
                </ul>
            </div>

            <div class="services_btn">
                <button>Services</button>
                <ul>
                    <li><a href="#">Transport</a></li>
                    <li><a href="#">Cafétéria</a></li>
                    <li><a href="#">Assurance</a></li>
                    <li><a href="#">Uniforme scolaire</a></li>
                    <li><a href="#">Orientation</a></li>
                    <li><a href="#">Intervenante</a></li>
                    <li><a href="#">Cours d'été</a></li>
                </ul>
            </div>

            <div class="portail_btn">
                <button>Portail</button>
                <ul>
                    <li href="">Coba</li>
                    <li href="">Google Classroom</li>
                    <li href="">Challenge U</li>
                    <li href="">Courriel (Admin)</li>
                    <li href="">Courriel (Élève)</li>
                    <li href="">Services aux élèves</li>
                </ul>
            </div>

        </div>

    </nav>
</section>

如何在 drop-down 菜单链接上保持悬停状态

How to keep hover, active on the drop-down menu links

html

css

hover

drop-down-menu