當您查看本網站的選單時： https ://www.eurotuin.be/
當你試圖懸停它時，它會很快崩潰。 看這里的選單
我嘗試過使用以下代碼進行試驗，但它似乎不起作用：
.main-nav__link {
transition:all 0s ease 0s!important;
}
這個有同樣的效果：
.main-nav__link {
transition:all 3s ease 3s!important;
}
uj5u.com熱心網友回復：
您當前正在使用“顯示”，這不是可以轉換的東西。
您應該使用可以轉換的東西，例如“不透明度”和“可見性”相結合。
下面的代碼應該可以達到預期的效果。
.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;
}
uj5u.com熱心網友回復：
兩件事情 ：
如果持續時間為 0s，過渡會有什么影響（我不是專家，這是一個真正的問題）？加上過渡應用于您的鏈接，它不會對您的選單產生任何影響（這是一個不同的元素）。
所以這里的問題是：隨著顯示屬性從無到阻塞的變化，您的選單被顯示/隱藏。
更準確地說，.hide() 和 .show() 應用于 mouseout 和 mouseover 事件（來自 li 元素）的選單元素。因此，只要滑鼠進入或退出 li 元素，選單就會“隱藏”和“顯示”。
另請注意，顯示屬性不能影片或過渡。
uj5u.com熱心網友回復：
這是作為新鮮人的最佳解決方案
<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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/470832.html
標籤：javascript html css 马金托 菜单