Skip to main content
replaced http://pt.stackoverflow.com/ with https://pt.stackoverflow.com/
Fonte Link

Como pedido nos commentsComo pedido nos comments aqui fica a mesma funcionalidade a titulo de exemplo só com JavaScript, mas o melhor é fazer só com CSS como no exemplo em cima e não com JavaScript.

Como pedido nos comments aqui fica a mesma funcionalidade a titulo de exemplo só com JavaScript, mas o melhor é fazer só com CSS como no exemplo em cima e não com JavaScript.

Como pedido nos comments aqui fica a mesma funcionalidade a titulo de exemplo só com JavaScript, mas o melhor é fazer só com CSS como no exemplo em cima e não com JavaScript.

adicionou 402 caracteres ao conteúdo
Fonte Link
Sergio
  • 135,1mil
  • 16
  • 201
  • 294

Como pedido nos comments aqui fica a mesma funcionalidade a titulo de exemplo só com JavaScript, mas o melhor é fazer só com CSS como no exemplo em cima e não com JavaScript.

Exemplo JS: jsfiddle.net/tpmzLaro/

Como pedido nos comments aqui fica a mesma funcionalidade a titulo de exemplo só com JavaScript, mas o melhor é fazer só com CSS como no exemplo em cima e não com JavaScript.

Exemplo JS: jsfiddle.net/tpmzLaro/

Fonte Link
Sergio
  • 135,1mil
  • 16
  • 201
  • 294

Para que o li também fique com o background basta juntar ul li:hover no CSS. Podes também juntar > a se quiseres a côr branca no texto. > a significa os elementos a que são descendentes diretos de li, portanto só afetando o primeiro a e não os outros que estão em níveis mais profundos.

Dessa maneira todos os li descendentes de ul que tenham o mouse dentro desse elemento recebem essa regra. E repara que como os links que se abrem também são descendentes desse li então a regra vale enquanto o mouse estiver em cima deles também.

Basta então fazeres ul li:hover > a, ul li a:hover{ no 4o bloco de CSS do teu exemplo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Show Hide Dropdown Using CSS</title>
<style type="text/css">
    ul{
        padding: 0;
        list-style: none;
        background: #f2f2f2;
    }
    ul li{
        display: inline-block;
        position: relative;
        line-height: 21px;
        text-align: left;
    }
    ul li a{
        display: block;
        padding: 8px 25px;
        color: #333;
        text-decoration: none;
    }
    ul li:hover > a, ul li a:hover{ /* <--------- mudei aqui */
        color: #fff;
        background: #939393;
    }
    ul li ul.dropdown{
        min-width: 125px; /* Set width of the dropdown */
        background: #f2f2f2;
        display: none;
        position: absolute;
        z-index: 999;
        left: 0;
    }
    ul li:hover ul.dropdown{
        display: block; /* Display the dropdown */
    }
    ul li ul.dropdown li{
        display: block;
    }
</style>
</head>
<body>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li>
            <a href="#">Products &#9662;</a>
            <ul class="dropdown">
                <li><a href="#">Laptops</a></li>
                <li><a href="#">Monitors</a></li>
                <li><a href="#">Printers</a></li>
            </ul>
        </li>
        <li><a href="#">Contact</a></li>
    </ul>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</p>
</body>
</html>