.overlay oluştur opacity 0 yap, tamamen ekranı kaplasın, position:fixed inherit 0 verirsen olur, bu overlay'ı aynı parrent içine koyman gerekiyor css'in tanıması için, daha sonra css ile '~' bu seçiçi ile o overlay'a hover durumunda ulaşıp sadece arkaplan kararmasını yapıp açılır menüyü normal bırakabilirsin.
<!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 class="dropdown-menu"><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 class="dropdown-menu"><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 class="dropdown-menu"><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 class="dropdown-menu"><a href="">Üyelik İşlemleri</a>
<ul>
<li><a href="">Kayıt Ol</a></li>
<li><a href="">Giriş</a></li>
</ul>
</li>
<div class="overlay"></div>
</ul>
</div>
</div>
</body>
</html>
@import url('
https://fonts.googleapis.com/css2?f...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;
}
.overlay{
z-index: 100;
position: fixed;
inset: 0;
background: black;
opacity: 0;
pointer-events: none;
transition: 0.3s;
}
.dropdown-menu:hover ~ .overlay{
opacity: 0.8;
}
.dropdown-menu:hover{
position: relative;
z-index: 101;
}
