[我尝试制作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>
有人知道如何解决我的问题吗?(另外请注意,不能通过单击主要项目而不是悬停来解决此问题,因为单击主要项目会链接到另一页)。
感谢您的时间,汤姆
我曾尝试制作sidenav,并希望将其设置为下拉菜单,但是当我停止将鼠标悬停在主菜单上时,该下拉菜单消失了。有人知道如何解决我的问题吗? (还要注意,这不能...
问题是您正在选择锚标记的悬停,这是子菜单的同级。更改您的