当前位置： 文江博客话题详情

如何保持悬停在下拉菜单链接上处于活动状态

发布于 2025-01-13 10:21:36 字数 4828 浏览 2 评论 0原文

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

.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>

原文

So I have this drop-down menu, but I can't get it to stay when I'm hovering over it. When I hover over the button, the menu appears, but when I hover over the links from the drop-down menu, it disappears. I tried to fix it by changing the hover properties and including the Li tag but nothing works when I change the code part with hover, the menu just doesn't show anymore. I think it's related to parents and child content, but I'm not sure. Thanks in advance!

.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>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

楠木可依 2025-01-20 10:21:36

在按钮的父元素上使用 :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>

Use :hover on button's parent element instead:

.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>

回复 原文
友谊不毕业 2025-01-20 10:21:36
.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>

.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>

回复 原文
~没有更多了~

关于作者

英雄似剑

暂无简介

文章
评论
679 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

眼泪淡了忧伤

文章 0 评论 0

corot39

文章 0 评论 0

守护在此方

文章 0 评论 0

github_3h15MP3i7

文章 0 评论 0

相思故

文章 0 评论 0

滥情空心

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文