+ 1

Tried creating dropdown and it's not working... Guys help out.

22nd Aug 2020, 6:04 PM

Akinpelumi Taiwo

2 Answers

+ 8

Here are a few problems that I fixed in the below code: - dropcontent was not a decendent of dropdown so your .dropcontent:hover .dropdown selector had no effect. - overflow: hidden hid the dropcontent. This sort of works: <style> .dropdown { position:relative; } .dropbutton { background-color:gray; color:silver; padding:16px; font-size:20px; border:none; } .dropcontent { display:none; position:absolute; background-color:cyan; min-width:100%; overflow:auto; z-index:1; } .dropcontent a { color:black; padding:8px 12px; display:block; text-decoration:none; } .dropcontent a:hover { background-color:#ddd; } .dropdown:hover .dropcontent { display:block; } .dropdown:hover .dropbutton { background-color:black; } </style> </head> <body> <h1 align="center"><b><strong> DROPDOWNS.</strong></b></h1> <div class="dropdown"> <button class="dropbutton">Dropdown</button> <div class="dropcontent"> <li> <a href="#">one</a> </li> <li> <a href="#">two</a> </li> <li> <a href="#">three</a> </li> </div> </div>

22nd Aug 2020, 6:09 PM

Josh Greig

+ 2

Worked miracle... Thanks for taking your time to read, understand and correct the code... Really appreciate it, been stuck at it for 3days now What a relieve. 😊

22nd Aug 2020, 6:22 PM

Akinpelumi Taiwo