将鼠标悬停在下拉菜单上时，如何让导航栏下拉菜单保持不变？答案

【问题标题】：How do I get navigation bar's dropdown to stay when hovering over the dropdown?将鼠标悬停在下拉菜单上时，如何让导航栏下拉菜单保持不变？
【发布时间】：2017-03-26 19:41:25
【问题描述】：

我有一个带有简单导航栏的简单网站，但经过大量研究，这似乎是一项非常艰巨的任务。
将鼠标悬停在任何按钮上时，它会显示一个下拉菜单以显示更多选项。
我的工作正常，但是当我将鼠标悬停在下拉列表的内容上时，如何让下拉列表保持不变？

基本上当光标离开导航栏按钮并进入下拉菜单时，它不会消失。

我读到 jQuery 可以做到这一点，但如果可能的话，我想单独用 JavaScript 来做，即使它很长。

导航栏的悬停本身可以工作，但是无论我在悬停时试图将下拉菜单保留在哪里，都会让所有东西都出错。

这是我拥有的代码，并且我已经尝试过：

document.getElementById("server").onmouseover = function() {
	serverMouseOver()
	};
document.getElementById("server").onmouseout = function() {
	serverMouseOut()
	};
function serverMouseOver() {
	document.getElementById("serverdropdownbox").className += "animated fadeIn";
	};
function serverMouseOut() {
	document.getElementById("serverdropdownbox").className += "animated fadeOut";
	};
document.getElementById("serverdropdownbox").onmouseover = function() {
	serverDropdownMouseOver()
	};
document.getElementById("serverdropdownbox").onmouseout = function() {
	serverDropdownMouseOut()
	};
function serverDropdownMouseOver() {
	document.getElementById("serverdropdownbox").style.opacity = "1";
	};
function serverDropdownMouseOut() {
	document.getElementById("serverdropdownbox").style.opacity = "0";
	};

			

#navbarbox			
			{
			clear: both;
			display: block;
			width: 100vw;
			height: 3.5vw;
			padding: 0vw 0 0 0;
			margin: 0;
			}
#navbar, #navbar ul
			{
			width: 100vw;
			height: 3.5vw;
			display: flex;
			padding: 0 0 0 0;
			margin: 0;
			}
			
#navbar span
			{
			height: 3.5vw;
			display: block;
			transform: skewX(15deg);
			}
			
#navbar li
			{
			color: white;
			list-style: none;
			display: inline-block;
			padding: 1vw 3.95vw 1vw 3.95vw;
			margin: auto;
			text-align: center;
			color: red;
			font-size: 2.3vw;
			font-family: Jura;
			height: 2.5vw;
			transform: skewX(-15deg);
			}
			
#serverdropdownbox
			{
			display: block;
			opacity: 0;
			float: left;
			color: white;
			background-color: darkblue;
			width: 0;
			}
			
#serverdropdowncontent
			{
			list-style-type: none;
			width: 16vw;
			margin: 1vw 0 0 10.1vw;
			}
			
			
#serverdropdowncontent li
			{
			border: 1px solid white;
			font-size: 25px;
			text-align: center;
			padding: 1vw 0 1vw 0;
			background-color: white;
			}
			
#server
			{
			background-color: blue;
			}
			
#communitydropdownbox
			{
			display: block;
			float: left;
			color: white;
			background-color: darkblue;
			width: 0;
			}
			
#communitydropdowncontent
			{
			list-style-type: none;
			width: 19.7vw;
			margin: 1vw 0 0 26vw;
			}
			
			
#communitydropdowncontent li
			{
			border: 1px solid white;
			font-size: 25px;
			text-align: center;
			padding: 1vw 0 1vw 0;
			}
			
#community
			{
			background-color: brown;
			}			
#storedropdownbox
			{
			display: block;
			float: left;
			color: white;
			background-color: darkblue;
			width: 0;
			}
			
#storedropdowncontent
			{
			list-style-type: none;
			width: 13.6vw;
			margin: 1vw 0 0 45.65vw;
			}
			
			
#storedropdowncontent li
			{
			border: 1px solid white;
			font-size: 25px;
			text-align: center;
			padding: 1vw 0 1vw 0;
			}
			
#store
			{
			background-color: blue;
			}			
#downloadsdropdownbox
			{
			display: block;
			float: left;
			color: white;
			background-color: darkblue;
			width: 0;
			}
			
#downloadsdropdowncontent
			{
			list-style-type: none;
			width: 19.8vw;
			margin: 1vw 0 0 59.2vw;
			}
			
			
#downloadsdropdowncontent li
			{
			border: 1px solid white;
			font-size: 25px;
			text-align: center;
			padding: 1vw 0 1vw 0;
			}
			
#downloads
			{
			background-color: brown;
			}			
#contactdropdownbox
			{
			display: block;
			float: left;
			color: white;
			background-color: darkblue;
			width: 0;
			}
			
#contactdropdowncontent
			{
			list-style-type: none;
			width: 16vw;
			margin: 1vw 0 0 78.9vw;
			}
			
			
#contactdropdowncontent li
			{
			border: 1px solid white;
			font-size: 25px;
			text-align: center;
			padding: 1vw 0 1vw 0;
			}
			
#contact
			{
			background-color: blue;
			}
			
.animated
			{
  			animation-duration: 1s;
  			animation-fill-mode: both;
			}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  animation-name: fadeIn;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fadeOut {
  animation-name: fadeOut;
}

<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Jura" />
<body>


<!--Giga logo, top left-->
<img id="gigalogo"  src="images/gigalogo.png">

<!--Steam logo, top right-->
<div id="steamlogomainbox">
		<img id="steamlogo" src="images/steamlogo.png">
</div>

<!--navigation barrrrrr-->
<div id="navbarbox">
	<ul id="navbar">
		<a href="default.html"><li style="background-color: purple;"><span>Home</span></li></a>
		<a href="servers.html"><li id="server"><span>Servers</span></li></a>
		<a href="community.html"><li id="community"><span>Community</span></li></a>
		<a href="store.html"><li id="store"><span>Store</span></li></a>
		<a href="downloads.html"><li id="downloads"><span>Downloads</span></li></a>
		<a href="contact.html"><li id="contact"><span>Contact</span></li></a>
	</ul>
</div>

<div id="serverdropdownbox">
	<ul id="serverdropdowncontent">
		<a href="serverlist.html"><li id="serverdropdownli">Server List</li></a>
		<li id="serverdropdownli">GigaDB</li>
		<li id="serverdropdownli">CS:GO</li>
	</ul>
</div>

<div id="communitydropdownbox">
	<ul id="communitydropdowncontent">
		<a href="events.html"><li>Events</li></a>
		<li></li>
	</ul>
</div>

<div id="storedropdownbox">
	<ul id="storedropdowncontent">
		<li>Credits</li>
		<li>Items</li>
		<li>VIP</li>
	</ul>
</div>

<div id="downloadsdropdownbox">
	<ul id="downloadsdropdowncontent">
		<li>TF2</li>
		<li>CS:GO</li>
		<li>Minecraft</li>
	</ul>
</div>

<div id="contactdropdownbox">
	<ul id="contactdropdowncontent">
		<li>Contact Us</li>
		<li>Staff</li>
		<a href="https://steamcommunity.com/groups/gigagamings" target="_blank"><li>Steam Group</li></a>
		<li>Appeal Ban</li>
		<li>Links</li>
	</ul>
</div>

【问题讨论】：

您不需要 JavsScript。使用:hover 伪类。在线搜索“suckerfish dropdowns”（这是该技术的名称）。

标签： javascript html css

【解决方案1】：

首先 - 您的 HTML 结构无效。 ul 标签只能有 li 作为直接子代，而不是 a。所以ul > a > li必须换成ul > li > a。

第二——这样简单的菜单你不需要 JS。将ul > li > ul 作为子菜单并在ul > li 上使用:hover 来显示您的子菜单。

ul {
  padding: 0;
}

li {
  white-space: nowrap;
  list-style: none;
}

#menu > li {
  position: relative;
  display: inline-block;
}

#menu > li > ul {
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 100%;
  opacity: 0;
  transition: opacity 200ms ease-in-out;
}

#menu > li:hover > ul {
  opacity: 1;
}

<ul id="menu">
  <li><a href="home.html">Home</a></li>
  <li>
    <span>Servers</span>
    <ul>
      <li><a href="server1.html">Server 1</a></li>
      <li><a href="server2.html">Server 2</a></li>
      <li><a href="server3.html">Server 3</a></li>
    </ul>
  </li>
</ul>

【讨论】：