当我将鼠标悬停在其内容上时，如何让导航栏的下拉列表停留？

Question

我想出了一个简单的导航栏，我为它的外观设计了最基本的框架。阅读完之后，当我将鼠标悬停在主要元素（单词）上时，我设法能够创建一个下拉列表。

当我将鼠标悬停在下拉列表上时，如何保持下拉状态？

当我将鼠标悬停在下拉菜单上时，我尝试使用JS将opacity保持为1，但它不起作用，因为下拉列表本身基于opacity，并且无论如何都会影响它我是否最初在主要元素上盘旋，因为它不是display:none。

另外，另一个问题是，在我的“服务器”下拉菜单中，我似乎只能看到“服务器列表”，而不是<ul>中的其他2，为什么会这样？

关于我设法实现的目标，这是我的代码：

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";
	};

.clearfix	{
			clear: both;
			}

body
			{
			background-color: rgb(21,14,43);
			background-image: url("../images/backgroundimage.jpg");
			background-size: cover;
			background-repeat: no-repeat;
			background-attachment: fixed;
			min-height: 100%;
			background-position: center center;
			overflow: hidden;
			}
			
#steamlogomainbox:hover
			{
			width: 12vw;
			}
	
#gigalogo
			{
			width: 26vw;
			height: 8vw;
			margin: 0 0 0 2vw;
			padding: 0;
			}
			
#steamlogomainbox
			{
			width: 10.5vw;
			height: 7vw;
			float: right;
			background-color: #0B0D16; /*000c21*/
			-webkit-clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
			clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
			margin: 0.2vw -1vw 0 0;
			padding: 0;
			overflow: hidden;
			}
			
#steamlogo
			{
			padding: 0.7vw 0 0 3vw;
			height: 5.6vw;
			}		

#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;
			transform: skewX(15deg);
			}
			
#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;
			transform: skewX(15deg);
			}
			
#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;
			transform: skewX(15deg);
			}
			
#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;
			transform: skewX(15deg);
			}
			
#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;
			transform: skewX(15deg);
			}
			
#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;
}

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

<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>