CSS3 - HTML Navlist background issue - html

Question

I'm currently in my last year of high school and I need to make a basic website.
I've hit a wall with creating my drop-down navlist though.
It works very well, but I have no idea how to make it so that if you scroll over one of the subitems, the background of the hovered-over item covers the whole item.
That sentence was pretty weird, I'm quite new to this.
I've used this jsfiddle thing to sketch the problem, http://jsfiddle.net/5EbSv/5/ .
On the second list item, you can see that the first two list items do not have a fully covered background on hover.
Check out the jsfiddle link for the best example of my problem.
This is the HTML:
<div class="navlist">
<ul id="menu">
<li>Item1</li>
<li>Item2
<ul>
<li>SubItem1</li>
<li>SubItem2</li>
<li>Making an example</li>
</ul>
</li>
<li>Item3
<ul>
<li>SubItem1</li>
<li>SubItem2</li>
<li>SubItem3</li>
<li>SubItem4</li>
<li>SubItem5</li>
</ul>
</li>
<li>Item4</li>
</ul>
</div>
and this is the CSS:
#menu a{
color: #0070A2;
}
#menu, #menu ul {
margin:0 auto;
padding:0;
}
#menu {
display: inline-block;
list-style:none;
}
#menu li {
font-size: 14px;
background: #292A2C;
float: left;
position: relative;
list-style: none;
}
#menu > li:hover > ul {
display: block;
}
#menu > li > ul {
display: none;
position: absolute;
background: #292A2C;
color: white;
}
#menu li a {
display:block;
padding:10px 10px;
text-decoration:none;
font-weight:bold;
white-space: nowrap;
}
#menu li a:hover {
color: white;
background: grey;
}
Thanks for checking it out

Answer 1

You need to remove the left float for sub menus list items, e.g.
#menu li li {float:none;}