当我停止悬停主要项目时，我的 sidenav 子菜单消失了

Question

我尝试制作一个sidenav，并希望将其设为下拉菜单，但是当我停止悬停主要项目时，下拉菜单消失了。

有人知道如何解决我的问题吗？ （另请注意，这不能通过单击主要项目而不是悬停来解决，因为单击主要项目链接到另一个页面）。

这是我的代码：

/* Style the links inside the sidenav */
#mySidenav a {
    position: absolute; /* Position them relative to the browser window */
    left: -80px; /* Position them outside of the screen */
    transition: 0.3s; /* Add transition on hover */
    padding: 15px; /* 15px padding */
    width: 100px; /* Set a specific width */
    text-decoration: none; /* Remove underline */
    font-size: 12px; /* Increase font size */
    color: white; /* White text color */
    border-radius: 0 5px 5px 0; /* Rounded corners on the top right and bottom right side */
}


    

/* The about link: 20px from the top with a green background */
.Home {
    top: 20px;
    background-color: #4CAF50;
}
#Home a:hover {
    left: 0; /* On mouse-over, make the elements appear as they should */
}
.Info {
    top: 80px;
    background-color: #2196F3; /* Blue */
}
#Info a:hover {
    left: 0; /* On mouse-over, make the elements appear as they should */
}
.Producten {
    top: 140px;
    background-color: #f44336; /* Red */
}
#Producten a:hover {
    left: 0; /* On mouse-over, make the elements appear as they should */
}
    #Producten a:hover ~ DropdownGroepstraining {
        visibility: visible;
        width: 100px;
        height: 45px;
    }

.DropdownGroepstraining {
    top: 185px;
    margin-left: 140px;
    background-color: #f44336; /* Red */
    display: none;
}

.DropdownPrivetraining {
    top: 230px;
    margin-left: 140px;
    background-color: #f44336; /* Red */
    display: none;
}

.DropdownTrajectopmaat {
    top: 275px;
    margin-left: 140px;
    background-color: #f44336; /* Red */
    display: none;
}
.Trainers {
    top: 200px;
    background-color: #555 /* Light Black */
}
#Trainers a:hover {
    left: 0; /* On mouse-over, make the elements appear as they should */
}
.DropdownPieter {
    top: 245px;
    margin-left: 140px;
    background-color: #555;
    display: none;
}
.DropdownLaura {
    top: 290px;
    margin-left: 140px;
    background-color: #555;
    display: none;
}
.DropdownYannick {
    top: 335px;
    margin-left: 140px;
    background-color: #555;
    display: none;
}
.DropdownSander {
    top: 380px;
    margin-left: 140px;
    background-color: #555;
    display: none;
}
.DropdownNick {
    top: 425px;
    margin-left: 140px;
    background-color: #555;
    display: none;
}
.Contact {
    top: 260px;
    background-color: purple;
}
#Contact a:hover {
    left: 0; /* On mouse-over, make the elements appear as they should */
}
.DropdownContactform {
    top: 305px;
    margin-left: 140px;
    background-color: purple;
    display: none;
}
.DropdownFacebook {
    top: 350px;
    margin-left: 140px;
    background-color: purple;
    display: none;
}
.DropdownInsta {
    top: 395px;
    margin-left: 140px;
    background-color: purple;
    display: none;
}
.FAQ {
    top: 320px;
    background-color: rgba(245, 240, 15, 0.7)
}
#FAQ a:hover {
    left: 0; /* On mouse-over, make the elements appear as they should */
}

a:hover ~ a {
    display: block;
}

     <nav>
          <div id="mySidenav" class="sidenav">
  <div id="Home"><a href="Default.aspx" class="Home">Home</a></div>
  <div id="Info"><a href="Info.aspx" class="Info">Info</a></div>

<div id="Producten"><a href="Producten.aspx" class="Producten">Producten</a>
              <a href="Groepstraining.aspx" class=" DropdownGroepstraining">Groepstraining</a>
              <a href="Privetraining.aspx" class="DropdownPrivetraining">Privétraining</a>
              <a href="TrajectOpMaat.aspx" class="DropdownTrajectopmaat">Traject op maat</a>    
              </div>
  <div id="Trainers"><a href="Trainers.aspx" class="Trainers">Trainers</a>
              <a href="PieterGeerts.aspx" class="DropdownPieter">Pieter Geerts</a>
              <a href="LauraVanBaekel.aspx" class="DropdownLaura">Laura Van Baekel</a>
              <a href="YannickMaes.aspx" class="DropdownYannick">Yannick Maes</a>
              <a href="SanderGeerts.aspx" class="DropdownSander">Sander Geerts</a>
              <a href="NickVanCamp.aspx" class="DropdownNick">Nick Van Camp</a>
      </div>
  <div id="Contact"><a href="Contact.aspx" class="Contact">Contact</a>
              <a href="Contactformulier.aspx" class="DropdownContactform">Contactformulier</a>
              <a href="https://www.facebook.com/ttkempen/" target="_blank" class="DropdownFacebook"><img id="navfacebooklogo" src="images/facebooklogo.png" />Facebook</a>
              <a href="https://www.instagram.com/tt_kempen/?hl=nl" target="_blank" class="DropdownInsta"><img id="navinstagramlogo" src="images/instagramlogo.png" />Instagram</a>
    </div>  
  <div id="FAQ"><a href="FAQ.aspx" class="FAQ">FAQ</a></div>
</div> 
</nav>

有人知道如何解决我的问题吗？ （另请注意，这不能通过单击主要项目而不是悬停来解决，因为单击主要项目链接到另一个页面）。

感谢您的宝贵时间， 汤姆

Answer 1

问题是您正在选择作为子菜单兄弟的锚标记的悬停。 改变你的

#Producten a:悬停{

到

#Producten:将鼠标悬停在 {

这样，您选择了父级的悬停，因此悬停菜单和子菜单时菜单将可见