为什么网站导航崩溃得这么快？

Question

当您查看本网站的菜单时： https://www.eurotuin.be/

当你试图将它悬停时，它会很快崩溃。 see the menu here

我试过使用以下代码进行试验，但它似乎不起作用：

.main-nav__link {
    transition:all 0s ease 0s!important;
}

这个效果一样：

.main-nav__link {
    transition:all 3s ease 3s!important;
}

Answer 1

两件事：

如果持续时间为 0 秒，转换会有什么影响（我不是专家，这是一个真正的问题）？此外，过渡应用于您的 link，它不会对您的菜单（这是不同的元素）产生任何影响。
所以这里的问题是：随着显示属性从 none 变为阻塞，您的菜单 shown/hidden。

更准确地说，.hide() 和 .show() 应用于 mouseout 和 mouseover 事件（来自 li 元素）的菜单元素。所以菜单'hide'和'show'鼠标一进入或退出li元素。

另请注意，显示属性无法设置动画或过渡。

Answer 2

作为一个新人，这是最好的解决方案

                <html>
            <head>
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <style>
            .dropbtn {
              background-color: #04AA6D;
              color: white;
              padding: 16px;
              font-size: 16px;
              border: none;
            }
            
            .dropdown {
              position: relative;
              display: inline-block;
            }
            
            .dropdown-content {
              display: none;
              position: absolute;
              background-color: #f1f1f1;
              min-width: 160px;
              box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
              z-index: 1;
            }
            
            .dropdown-content a {
              color: black;
              padding: 12px 16px;
              text-decoration: none;
              display: block;
            }
            
            .dropdown-content a:hover {background-color: #ddd;}
            
            .dropdown:hover .dropdown-content {display: block;}
            
            .dropdown:hover .dropbtn {background-color: #3e8e41;}
            </style>
            </head>
            <body>
            
            <h2>Hoverable Dropdown</h2>
            <p>Move the mouse over the button to open the dropdown menu.</p>
            
            <div class="dropdown">
              <button class="dropbtn">Dropdown</button>
              <div class="dropdown-content">
                <a href="#">Link 1</a>
                <a href="#">Link 2</a>
                <a href="#">Link 3</a>
              </div>
            </div>
            <div class="dropdown">
              <button class="dropbtn">Dropdown</button>
              <div class="dropdown-content">
                <a href="#">Link 1</a>
                <a href="#">Link 2</a>
                <a href="#">Link 3</a>
              </div>
            </div>
            
            </body>
            </html>

Answer 3

您目前正在使用 'display'，这不是可以转换的东西。

你应该使用一些可以转换的东西，比如 'opacity' 结合 'visibility'。

下面的代码应该可以达到预期的效果。

.main-nav__flyout {
  display: block !important;
}

.main-nav__item .main-nav__flyout {
  transition: all 0.5s ease 0.2s!important;
  opacity: 0;
  visibility: hidden;
}

.main-nav__item:hover .main-nav__flyout {
  opacity: 1;
  visibility: visible;
}

为什么网站导航崩溃得这么快？

Why is the site navigation collapsing so fast?

html

javascript

css

menu

magento