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>
Often have questions like this?
Learn more efficiently, for free:
