html - CSS hover menu closes after first option -

my css drop down menu looks perfect when hover main selection, , go first option works, when navigate option 2, closes. space below option 1 closes.

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>

website is: http://corumvanadium.com/character.html

i've checked threads recommended ones before posting.

try adding z-index container ul(drop-nav)

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