<div> <ul> <li class='lista1'> <a href="#">Menu Dropdown</a> <ul class='lista2'> <li class='lista-link'><a class='link' href="#">Link 1</a></li> <li class='lista-link'><a class='link' href="#">Link 2</a></li> <li class='lista-link'><a class='link' href="#">Link 3</a></li> </ul> </li> </ul> </div>
*{ margin: 0; } div { background-color: yellow; } div a { text-decoration: none; color: black; font-size: 20px; font-weight: 600; padding: 15px; display:inline-block; } ul { display: inline; margin: 0; padding: 0; } .lista1 { display: inline-block; } .lista1:hover { background: #333; } .lista1:hover .lista2 { display: block; } .lista2 { position: absolute; width: 200px; display: none; } .lista-link { background: #555; display: block; } .link { display:block !important; } .lista-link:hover { background: #666; }