Sub-Menu Hover Only Partionaly Working - html

Question

Here it is:
http://gyazo.com/e94edf3c9b10bc33c2d9be8ed049583e
As you can see, the submenu works, and when I hover over something on the submenu, it creates a grey background. The problem is, once I get under "Sports Edition", the hover basically cancels and closes the submenu. It stops right where that blue line begins.
Here is the code:
HTML:
<div id="toprightunder">
<ul>
<li>
Content options
<ul>
<li>Default Homepage</li>
<li>News Edition li>
<li>Entertainment Edition</li>
<li>Sports Edition</li>
<li>Latino Edition</li>
</ul>
</li>
</ul>
</div>
CSS: (there is a lot because I was testing a lot)
#toprightunder {
margin-top:18px;
height:15px;
position:absolute;
width:200px;
right:0;
}
#toprightunder a {
text-decoration:none;
color:rgb(100, 100, 100);
margin-left:0;
padding-bottom:3px;
}
#toprightunder ul {
list-style:none;
margin:0 auto;
/*text-align:right;*/
position:relative;
display:inline-table;
margin-left:0;
padding-left:0;
}
#toprightunder ul li {
display:inline;
color:rgb(100, 100, 100);
font-family:"arial", times, sans-serif;
font-size:10px;
margin-top:13px;
text-decoration:none;
margin-left:0;
padding-left:0;
}
#toprightunder ul ul {
display:none;
}
#toprightunder ul li:hover > ul {
display:block;
}
#toprightunder ul ul {
position: absolute;
top: 100%;
padding-top:2px;
padding-bottom:7px;
margin-right:0;
right:0px;
background: white;
border: 1px solid #000;
overflow:hidden;
height:auto;
margin:auto;
}
#toprightunder ul ul li {
position:relative;
color:rgb(100, 100, 100);
font-size:13px;
display:block;
/*margin-bottom:10px;
padding-left:25px;
padding-right:4px;*/
white-space:nowrap;
height:auto;
margin:auto;
}
#toprightunder ul ul li a {
color:#fff;
text-align:left;
float:left;
margin-right:0;
position:relative;
}
#toprightunder a:hover {
background-color:transparent;
color:rgb(100, 100, 100);
}
#toprightunder ul li:hover > li {
background-color:transparent;
}
#toprightunder ul ul li:hover > a {
color:rgb(50, 50, 50);
background:rgb(240, 240, 240);
}
#toprightunder ul ul li > a {
color:rgb(100, 100, 100);
padding-bottom:7px;
padding-top:2px;
padding-left:25px;
width:100%;
}
#headbar a {
text-decoration:none;
color:white;
padding-bottom:2px;
padding-top:4px;
padding-left:8px;
padding-right:8px;
}
#headbar ul ul {
display:none;
}
#headbar ul li:hover > ul {
display:block;
color:green;
}
#headbar ul {
text-decoration:none;
list-style:none;
margin-top:1px;
padding:0;
position:relative;
}
#headbar ul li {
display:inline;
color: white;
padding-bottom:2px;
padding-top:3px;
font-family:"arial", times, sans-serif;
font-size:12px;
}
#headbar ul ul {
border-radius: 0px;
position: absolute;
top: 100%;
padding-top:6px;
}
#headbar ul ul li {
float:none;
position:relative;
color:rgb(100,100,100);
font-size:16px;
}
#headbar ul ul li a {
color:#fff;
}
#headbar ul ul li a:hover {
}
/*#headbar ul:after {
content: "";
clear:both;
display:block;*/
#headbar a:hover {
background-color:rgb(255,255,255);
color:rgb(100,100,100);
}
#headbar ul li:hover > a{
color:rgb(50,50,50);
background-color:transparent;
padding-top:8px;
}
#headbar ul ul li > a {
color:rgb(100,100,100);
padding-top:8px;
}
#headbar {
width: 100%;
height: 20px;
background-color: rgb(30,144,255);
text-decoration:none;
padding-top:129px;
text-align: left;
/*position:relative;*/
}

Answer 1

Add z-index: 2; to the #toprightunder selector and that should resolve your problem.
#toprightunder {
margin-top:18px;
height:15px;
position:absolute;
width:200px;
right:0;
z-index: 2;
}