+ 2

I am trying to make a dropdown list, Can someone please tell me what is wrong in this code:

<!DOCTYPE html> <html> <head> <style> .nav{ padding:5px; display: none; } .nav a{ display: block; text-decoration: none; padding:10px; border:2px solid #43DA3E; color:black; background:#43DA3E; max-width:20%; text-align: center; } .nav a:hover{ background-color:#17BB11; color:white; } button{ padding:15px; width:152px; margin-left:5px; border:none; background-color:lighthgrey; } button:hover{ background-color:black; color:white; } button:hover .nav{ display:block; } </style> </head> <body> <h2>Dropdown Menu</h2> <p>Move the mouse over the button to open the dropdown menu.</p> <div> <button>Dropdown</button> <div class="nav"> <a href="#">Home</a> <a href="#">Contact</a> <a href="#">About</a> </div> </div> <p><strong>Note:</strong> We use href="#" for test links. In a real web site this would be URLs.</p> </body> </html>

1st Sep 2019, 1:38 AM
Izuku Midoria
Izuku Midoria - avatar
3 Réponses
2nd Sep 2019, 11:32 AM
Anwar Ali
Anwar Ali - avatar
+ 4
Oh no!!!! Huge work for dropdown list. Use, <detail><summary></summary></detail> tag. It is more easier. Problems? www.w3schools.com
1st Sep 2019, 1:51 AM
NightFox
NightFox - avatar
+ 2
Try button:hover ~ .nav{ display:block; }
1st Sep 2019, 2:51 AM
Calviղ
Calviղ - avatar