Мое подену sidenav исчезает, когда я прекращаю зависать - PullRequest
Новая
       55

Мое подену sidenav исчезает, когда я прекращаю зависать

0 голосов
/ 09 апреля 2020

Я попытался сделать 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>

Кто-нибудь знает, как решить мою проблему? (также обратите внимание, что это нельзя исправить, щелкнув по основному элементу вместо зависания, поскольку щелчок по основному элементу ссылается на другую страницу).

Спасибо за ваше время, Том

1 Ответ

0 голосов
/ 09 апреля 2020

Проблема в том, что вы выбираете наведение метки привязки, которое является родственным элементом подменю. измените ваш

# Producten: hover {

на

# Producten: hover a {

Таким образом, вы выбираете наведение родительского элемента , поэтому меню будет отображаться при наведении как меню, так и подменю

...