efehanarslan
Centipat
- Katılım
- 10 Ekim 2021
- Mesajlar
- 23
- Çözümler
- 1
Daha fazla
- Cinsiyet
- Erkek
Herkese merhaba, kendi web sitem için bir tasarım yapıyordum fakat çözüme bir türlü kavuşturamadığım sorunum var.
Bu şekilde bir: Hover ile çalışan açılır bir menü yaptım ve CSS düzenlemesini aşağıda ki gibi ayarladım.
Bir türlü kod içerisinde transition elemanının nasıl kullanılacağını çözemedim. Sadece kapanmadan 1 saniye kadar daha durmasını ve menü içerisine geldiğimde kapanmamasını istiyorum.
HTML:
<nav>
<ul class="nav__links">
<li><a href="#">Lorem Ipsum <i class='bx bx-chevron-down'></i></a>
<div class="dp-content">
<a href="#">Lorem Ipsum</a>
<a href="#">Lorem Ipsum</a>
<a href="#">Lorem Ipsum</a>
<a href="#">Lorem Ipsum</a>
</div>
</li>
<li><a href="#">Lorem Ipsum <i class='bx bx-chevron-down'></i></a></li>
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Lorem Ipsum</a></li>
</ul>
</nav>Bu şekilde bir: Hover ile çalışan açılır bir menü yaptım ve CSS düzenlemesini aşağıda ki gibi ayarladım.
CSS:
ul li .dp-content {
display: none;
position: absolute;
background-color: #0D0D14;
margin: 20px 0px 0px 25px;
padding: 15px 45px 15px 25px;
border-radius: 10px;
}
.dp-content a {
padding: 10px 0px;
}
ul li:hover .dp-content{
display: flex;
flex-direction: column;
}Bir türlü kod içerisinde transition elemanının nasıl kullanılacağını çözemedim. Sadece kapanmadan 1 saniye kadar daha durmasını ve menü içerisine geldiğimde kapanmamasını istiyorum.
