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

  • Konuyu başlatan AHkn
  • Başlangıç Tarihi
  • Mesaj 2
  • Görüntüleme 45

AHkn

Hectopat
Katılım
11 Kasım 2022
Mesajlar
28
Daha fazla  
Sistem Özellikleri
AMD Ryzen 5 5700G
GIGABYTE B500M DS3H
AMD Radeon RX6800
Cinsiyet
Erkek
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?

Ekran görüntüsü 2025-11-11 122647.png
 
Son düzenleyen: Moderatör:
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;
}
 
Son düzenleme:

Technopat Haberler

Yeni konular

Geri
Yukarı