я бы хотел, чтобы мой заголовок находился в поле при наведении на него курсора. Как на этом веб-сайте: https://www.dasbootshaus.at/de/das-bootshaus.html при наведении курсора на него исчезает сразу во всем раскрывающемся списке. Я попытался сделать это в elementor как пользовательский html и css, и мой код выглядит так:
HTML:
<div class="dropdown">
<button class="dropbtn">ÜBER UNS</button>
<div class="dropdown-content">
<a href="#">GALERIE</a>
<a href="#">LAGE</a>
</div>
</div>
CSS:
.full_center_dropdown nav ul {
min-width: 100% !important;
}
.full_center_dropdown nav ul a {
justify-content: center;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;
}
/* Dropdown Button */
.dropbtn {
position: relative;
background: transparent;
color: white;
padding: 20px;
width: 150px;
font-size: 15px;
border: none;
text-align: center;
font-weight: 900;
font-family: LATO;
transition: ease-in-out 0.8s;
margin-left: 20px;
}
.dropdown:hover .dropbtn {
background: white;
transition: background ease-in-out 0.5s;
color: black;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
position: absolute;
padding: 5px;
width: 150px;
left:-999em;
margin-left: 20px;
}
.dropdown:hover .dropdown-content {
background-color:white;
transition: background ease-in-out 0.5s;;
}
.dropdown:hover .dropdown-content {display: block;}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
font-size: 15px;
text-decoration: none;
display: block;
text-align: center;
}
Я пробовал разные вещи с непрозрачностью и легкостью перехода, но в раскрывающемся списке всегда есть небольшая задержка. Надеюсь, кто-нибудь сможет мне как-то помочь :)
Спасибо!