当我悬停时下拉菜单消失

时间:2021-02-22 10:05:58

标签: css wordpress drop-down-menu menu dropdown

我的菜单有问题。我有一个下拉菜单,但是当我将其悬停时,它会显示一秒钟,然后它就消失了。在 https://www.klokhof.be 上查看。

我该如何解决这个问题? WordPress 网站。

在此处查看图片。

https://klokhof.be/wp-content/uploads/2021/02/Schermafbeelding-2021-02-22-om-10.52.38.png

https://klokhof.be/wp-content/uploads/2021/02/Schermafbeelding-2021-02-22-om-10.46.57.png

1 个答案:

答案 0 :(得分:0)

直接解决方案和修复

您的 CSS 没有遵循正确的结构,让我们进行一些修复。

1. 你必须从这里删除所有边框“.bka_menu”类 https://prnt.sc/103mljp

.bka_menu{
   border:none; 
    //Remove all or add border:none
}
  1. 在“.navbar-default”类中添加两个CSS属性 https://prnt.sc/103mpbl

display: flex;

align-items: center;

.navbar-default {
    background-color: transparent!important;
    border-color: transparent!important;
    font-family: Source Sans Pro;
    font-size: 14px;
    line-height: 16px;
    font-weight: 400;
    display: flex; // Add this
    align-items: center; // Add this
}
  1. 将“margin-left:auto”添加到导航栏折叠(用于对齐导航的右侧) https://prnt.sc/103mr3h
.navbar-collapse{
    margin-left: auto;
}
  1. 在“.navbar-right a”类顶部添加填充 https://prnt.sc/103mt5r

padding-bottom: 10px;

padding-top: 10px;

.navbar-right a {
    color: #fff;
    padding-left: 15px!important;
    padding-right: 15px!important;
    line-height: 30px;
    padding-bottom: 10px;  // Add this
    padding-top: 10px; // Add this
}

Final Output with clean fix