Açılır menü üzerine gelindiğinde sayfanın kararması nasıl yapılır?

AHkn · Dün 13:16

Dönem ödevim var yalnızca HTML vs CSS kullanmam lazım açılır menü üzerine gelindiğinde sayfanın kalan kısmı kararsın istiyorum. Örnekteki gibi nasıl yaparım?

Leroy_Sane · Dün 21:22

Kodları paylaşabilir misin?

AHkn · Dün 21:28

Leroy_Sane dedi:
Kodları paylaşabilir misin?

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DPTest</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="ustmenu">
            <div id="ustmenu2">
                <ul>
                    <li><a href="">Anasayfa</a></li>
                    <li><a href="">Ürünler</a>
                        <ul>
                            <li><a href="">Apple Ürünler</a></li>
                            <li><a href="">Samsung Ürünler</a></li>
                            <li><a href="">Xiaomi Ürünler</a></li>
                            <li><a href="">Huawei Ürünler</a></li>
                            <li><a href="">İnfinix Ürünler</a></li>
                            <li><a href="">Oneplus Ürünler</a></li>
                            <li><a href="">Google Pixel Ürünler</a></li>
                            <li><a href="">Poco Ürünler</a></li>
                        </ul>
                    </li>
                       
                    <li><a href="">Aksesuarlar</a>
                        <ul>
                            <li><a href="">Akıllı Saatler</a></li>
                            <li><a href="">Bluetooth Kulaklıklar</a></li>
                            <li><a href="">Şarj Aletleri</a></li>
                        </ul>
                    </li>
                       
                    <li><a href="">Müşteri Hizmetleri</a>
                        <ul>
                            <li><a href="">Hakkımızda</a></li>
                            <li><a href="">Kullanım Şartları</a></li>
                            <li><a href="">Satış Sözleşmesi</a></li>
                            <li><a href="">Teslimat Ve İade</a></li>
                            <li><a href="">Gizlilik Politikası</a></li>
                            <li><a href="">İletişim</a></li>
                        </ul>
                    </li>
                       
                    <li><a href="">Üyelik İşlemleri</a>
                        <ul>
                            <li><a href="">Kayıt Ol</a></li>
                            <li><a href="">Giriş</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
</body>
</html>

CSS:

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
*{
    margin: 0px;
    padding: 0px;
    font-family: "ubuntu", Arial, Helvetica, sans-serif;
    text-decoration: none;
    box-sizing: border-box;
    /*border: 1px solid black;*/
}
#ustmenu{
    width: 100%;
    height: 60px;
    background-color: #303030;
    color: rgb(110, 110, 110);
    display: flex;
    margin-bottom: 100px;
    align-items: center;
}
#ustmenu2{
    width: 60%;
    margin: 0px auto;
    z-index: 2;
}
#ustmenu2 ul{
    display: flex;
    list-style-type: none;
    justify-content: space-between;
    align-items: center;
}
#ustmenu2 a{
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    font-size: 25px;
}   
#ustmenu2 a:hover{
    color: #bbb;
}
#ustmenu2 li{
    position: relative;
}
#ustmenu2 li ul{
    display: none;
    position: absolute;
    border: 1px solid #bbb;
}
#ustmenu2 li ul a{
    display: block;
    width: 220px;
    background-color: #fff;
    color: #222;
    text-align: center;
    border-bottom: 1px solid #bbb;
    padding: 8px 6px;
}
#ustmenu2 li ul a:hover{
    background-color: #303030;
    color: #fff;
}
#ustmenu2 li:hover ul{
    display: block;
}

Açılır menü üzerine gelindiğinde sayfanın kararması nasıl yapılır?

AHkn

Hectopat

Leroy_Sane

Femtopat

AHkn

Hectopat