Home > front end >  How to keep hover, active on the drop-down menu links
How to keep hover, active on the drop-down menu links

Time：03-10

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 >
        <nav>
            <a href="Index.html" id="logo"><img src="Images/cflogo_main.png"></a>
            <div >
                <div >
                    <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 >
                    <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 >
                    <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 >
                    <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>

CodePudding user response：

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 >
        <nav>
            <a href="Index.html" id="logo"><img src="Images/cflogo_main.png"></a>
            <div >
                <div >
                    <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 >
                    <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 >
                    <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 >
                    <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>

CodePudding user response：

.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 >
    <nav>
        <a href="https://www.heisoe.com" id="logo"><img src="https://api.heinsoe.com/v3/index.svg"></a>
        <div >
            <div >
                <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 >
                <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 >
                <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 >
                <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>

Page link：https//www.codepudding.com/frontend/330086.html

Prev:label(input type="radio") is not coming in center
Next:Self-taught: trying to center a textbox in the middle of the page by creating a div and using flex.
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding