CSS悬停菜单在第一个选项后关闭

Question

我的CSS下拉菜单看起来很完美，但是当我将主要选项悬停，然后转到第一个选项时，它可以工作，但是当我导航到选项2时，它会关闭。选项1下面的任何空格都会关闭。

HTML：

.dropdown{
position: relative;
}
.dropdown:after{
content: "\25BC";
font-size: .5em;
display: block;
position: absolute;
top: 50%;
right: 12%;
color:white;
}
.drop-nav{
position: absolute;
display: none;
background-color:#1A0D07;
 width:190px;
 list-style: none;padding: 0px;margin: 0px;
}
 .dropdown:hover > .drop-nav {
 display: block;
}

<ul class="navigation">

	<li><a href="index.html">Home</a></li>
	
	
	
	<li class="dropdown">
	  <a href="character.html" class="active">Character List</a>
	<ul class="drop-nav">
		<center><li><a href="about.html">Fighter</a></li>
		<li><a href="updates.html">Priest</a></li>
		<li><a href="forum.html">Summoner</a></li>
		<li><a href="forum.html">Ranger</a></li>
		<li><a href="forum.html">Sorceress</a></li></center>
	</ul>
	</li>
	
	
	
	<li><a href="about.html">About</a></li>
	<li><a href="updates.html">Updates</a></li>
	<li><a href="forum.html">Forum</a></li>
</ul>
</div>

网站是： http://corumvanadium.com/character.html

在发布之前，我已经检查了所有帮助主题以及推荐的主题。

Answer 1

尝试将z-index添加到容器ul（drop-nav）

.drop-nav{z-index: 999;}

Answer 2

使用z-index

.drop-nav {
  position: absolute;
  display: none;
  background-color: #1A0D07;
  width: 190px;
  list-style: none;
  padding: 0px;
  margin: 0px;
  z-index: 10; /* <--- add z-index 10 or other value */
}