menu dropdown horizontal

<a href=' [url=https://ibb.co/gpRFfv][/url] '> [url=https://ibb.co/gpRFfv][/url] </a>

gan saya butuh bantuan nih gimana yah suapaya sub menu yang saya lingkari di foto saat di hover warna tulisan sama backgroundnya berubah soalnya saya coba beberapa kali yang berubah cuman background nya aja warna tulisannya gk berubah mohon bantuannya gan!! dan ini saya ada scriptnya

  <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>branda</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .navbarku{
            width: 100%;
            height: 60px;
            background: #f74444;
            padding-top:10px;
            padding-bottom: 10px;
        }
        .navbarku > .navbarisi > ul > li {
            float: left;
            width: 20%;
            border-right: 1px solid white;
            box-sizing: border-box;
        }
        .navbarisi ul li{
            list-style: none;
            text-align:center;
            background-color: #0c5ad8;
            font-size: 18px;
            height: 50px;
            line-height: 50px;
        }
        .navbarku .navbarisi ul li:hover{
            background: #f55656;
        }
        .navbarku .navbarisi ul li:last-child{
            border: none;
        }
        .navbarisi li .dropdown-menu{
            display: none;
            position: relative;
            clear: both;
        }
        li .dropdown-menu li{
            border:1px solid white;
        }
        .navbarisi ul li:hover .dropdown-menu{
            display: block;
        }
        .dropdown-menu > .dropdown-menu2 > li{
            float: left;
            width: 20%;
            border: 1px solid white;
            box-sizing: border-box;

        }
        .dropdown-menu .dropdown-menu2 li{
            list-style: none;
            text-align: center;
            background-color:#d34f4f;
            font-size: 18px;
            height: 50px;
            line-height: 50px;
            position: relative;
            left: 100%;
            top:-50px;
        }

        .dropdown-menu .dropdown-menu2 li{
            visibility: collapse;
        }
        .dropdown-menu li:hover .dropdown-menu2 li {
            visibility: visible;
        }
        .dropdown-menu .dropdown-menu2 li:hover{
            color: black;
            background: #f3afaf;
        }
        .navbarku .navbarisi ul a{
            text-decoration: none;
            color:beige;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <nav class="navbarku">
        <div class="navbarisi">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Category</a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Html</a></li>
                        <li><a href="#">Css</a></li>
                        <li><a href="#">Javascript</a>
                            <ul class="dropdown-menu2">
                                <li><a href="#">Pengenalan</a></li>
                                <li><a href="#">Materi</a></li>
                                <li><a href="#">Kuis</a></li>
                            </ul>
                        </li>
                        <li><a href="#">PHP</a></li>
                    </ul>
                </li>
                <li><a href="#">Forum</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">About Us</a></li>
            </ul>
        </div>
    </nav>
</body>
</html>

css

@hafizdjubaidir

110 Kontribusi 1 Poin

Diperbarui 6 tahun yang lalu

2 Jawaban:

[.dropdown-menu2 li a { color: blue; }]( .dropdown-menu2 li a { color: blue; } )

@hilmanski

2673 Kontribusi 2133 Poin

Dipost 6 tahun yang lalu

Jawaban Terpilih

Jangan lupa pake "li:hover > a" karena letaknya ada di dalam <a></a>. Kecuali tanpa <a></a>.


.dropdown-menu .dropdown-menu2 li:hover > a{
    color: black;
    background: #f3afaf;
}

@Ipinppc

27 Kontribusi 5 Poin

Dipost 6 tahun yang lalu

Kelas Premium! Belajar bikin website dari nol sekarang

menu dropdown horizontal

Kelas Premium!
Belajar bikin website dari nol sekarang