我正在开发一个网站。我已经创建了标题;在标题内,我有徽标和一个nabar粘贴在滚动条顶部的徽标。
但是当标题停留在顶部时,将鼠标移至触发器链接上方时,我的dropdown内容navbar不会显示。
我已经尝试过此CSS代码 .navbar .dropdown:hover dropbtn {display: block; }
<div class="navbar" id="sticky_header">
<a href="#home">Home</a>
<a href="#news">News</a>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
<script>
//STICKY HEADER
// When the user scrolls the page, execute myFunction
window.onscroll = function() {fixHeader();};
// Get the header
var header = document.getElementById("sticky_header");
// Get the offset position of the navbar
var sticky = header.offsetTop;
// Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
function fixHeader() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
</script>
鸿蒙传说
相关分类