猿问

如何修复鼠标悬停时的下拉菜单不起作用

我正在开发一个网站。我已经创建了标题;在标题内,我有徽标和一个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>


慕盖茨4494581
浏览 211回答 1
1回答

鸿蒙传说

您需要设置.dropdown-content到position: fixed时,导航栏是粘见下文//STICKY HEADER// When the user scrolls the page, execute myFunction&nbsp;window.onscroll = function() {fixHeader();};// Get the headervar header = document.getElementById("sticky_header");// Get the offset position of the navbarvar sticky = header.offsetTop;// Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll positionfunction fixHeader() {&nbsp; if (window.pageYOffset > sticky) {&nbsp; &nbsp; header.classList.add("sticky");&nbsp; } else {&nbsp; &nbsp; header.classList.remove("sticky");&nbsp; }}.navbar {&nbsp; &nbsp; width: 100%;&nbsp; overflow: hidden;&nbsp; background-color: darkred;&nbsp; font-family: monospace;&nbsp; &nbsp; text-transform: uppercase;&nbsp; box-shadow: 0px 10px 17px 0px black;}/* Links inside the navbar */.navbar a {&nbsp; float: left;&nbsp; font-size: 16px;&nbsp; color: white;&nbsp; text-align: center;&nbsp; padding: 14px 16px;&nbsp; text-decoration: none;&nbsp; &nbsp; border-right: 2px solid white;}/* The dropdown container */.dropdown {&nbsp; float: left;&nbsp; overflow: hidden;&nbsp; &nbsp; text-transform: uppercase;}/* Dropdown button */.dropdown .dropbtn {&nbsp; font-size: 16px;&nbsp;&nbsp; border: none;&nbsp; outline: none;&nbsp; color: white;&nbsp; padding: 14px 16px;&nbsp; background-color: inherit;&nbsp; font-family: inherit; /* Important for vertical align on mobile phones */&nbsp; margin: 0; /* Important for vertical align on mobile phones */}/* Add a red background color to navbar links on hover */.navbar a:hover, .dropdown:hover .dropbtn {&nbsp; background-color: #002500;}/* Dropdown content (hidden by default) */.dropdown-content {&nbsp; display: none;&nbsp; position: absolute;&nbsp; background-color: #f9f9f9;&nbsp; min-width: 160px;&nbsp; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);&nbsp; z-index: 1;}/* Links inside the dropdown */.dropdown-content a {&nbsp; float: none;&nbsp; color: black;&nbsp; padding: 12px 16px;&nbsp; text-decoration: none;&nbsp; display: block;&nbsp; text-align: left;&nbsp; &nbsp; border-bottom: 2px dotted #ccc;}/* Add a grey background color to dropdown links on hover */.dropdown-content a:hover {&nbsp; background-color: #002500;&nbsp; &nbsp; border-bottom: 2px dotted #002500;&nbsp; &nbsp; color: white;}/* Show the dropdown menu on hover */.dropdown:hover .dropdown-content {&nbsp; display: block;}.sticky {position:fixed;}/* show the dropdown when sticky*/.sticky .dropdown-content {position:fixed;}<div class="navbar" id="sticky_header">&nbsp; <a href="#home">Home</a>&nbsp; <a href="#news">News</a>&nbsp; <div class="dropdown">&nbsp; &nbsp; <button class="dropbtn">Dropdown&nbsp;&nbsp; &nbsp; &nbsp; <i class="fa fa-caret-down"></i>&nbsp; &nbsp; </button>&nbsp; &nbsp; <div class="dropdown-content">&nbsp; &nbsp; &nbsp; <a href="#">Link 1</a>&nbsp; &nbsp; &nbsp; <a href="#">Link 2</a>&nbsp; &nbsp; &nbsp; <a href="#">Link 3</a>&nbsp; &nbsp; </div>&nbsp; </div>&nbsp;</div><div style="height:200vh">Dummy content</div>
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答