时间戳

首页 > 解决方案 > ELEMENTOR 中的 CSS 和 HTML 用于 1 框标题下拉菜单

html - ELEMENTOR 中的 CSS 和 HTML 用于 1 框标题下拉菜单

问题描述

我想让我的标题在悬停在它上面时放在一个“盒子”中。就像在这个网站上一样：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;
}

我尝试了不同的不透明和缓入淡出过渡，但下拉菜单总是有一点延迟。我希望有人能以某种方式帮助我:)

谢谢！

标签： htmlcsselementor

解决方案

问题是你没有看到你的子菜单？

我认为您没有指出悬停按钮时元素应具有的新位置：

.dropdown:hover .dropdown-content {left: 0;}

目前，您的元素保留在这里：

left:-999em;

祝你今天过得愉快，

推荐阅读