Hover full width on drop down - html

Question

I having some problems with the hover effect on the full width of each of my drop down menu items. I want each items background color to change. At the moment, I can only get the width of the text hovered, not the width of the drop down.
http://jsfiddle.net/7AXZR/
Thanks!
The HTML:
<div id="nav">
<ul>
<li><img src="images/kranz3.png" alt="kranz"/>COMPETE</li>
<li><img src="images/thumb3.png" alt="thumb"/>SCORE</li>
<div id="logolist"><li><img src="images/logorz.png" width="175em" /></li></div>
<li><img src="images/shopnav.png" alt="bag"/>SHOP</li>
<ul id="more-dropdown"><li><img src="images/morenav2.png" alt="more"/>MORE<ul>
<div id="dropdown-links">
<li>Print your own art</li>
<li>How it works</li>
<li>About Causes</li>
<li>About our products</li>
<li>About us</li>
<li>Help & Feedback</li>
<li>Terms of Service</li>
<li>Privacy</li></ul>
</div>
</li>
</ul>
</div>
<div class="clear">
</div>
The CSS:
#nav {
position:relative;
background:#ffffff;
width:100%;
height:0.2em:
overflow:visible;
margin-top:-2em;
font-family:Cusmyrb;
font-size:75%;
}
#logolist {
position:absolute;
padding-top:2em;
width:150px;
left:50%;
margin-left:-90px;
margin-top:-7%;
}
#nav ul {
list-style-type:none;
}
#nav li {
display:inline;
float:left;
width:20%;
margin-left:2%;
margin-right:2%;
margin-top:3%;
text-align:center;
}
#nav a {
display:block;
margin-right:0% auto;
padding-left:0% auto;
color:#343234;
text-decoration:none;
}
#nav a:hover {
color:#5020B8;
}
#nav a:active {
color:#5020B8;
}
.clear {
clear:both;
}
#more-dropdown {
margin: 0;
padding: 0;
height:0;
}
#more-dropdown li {
list-style: none;
float: left;
}
#dropdown-links li a {
float:left;
display: block;
font-family:Cusmyr;
font-size:14px;
background-color:#797A7D;
color:#797A7D;
text-decoration: none;
margin-top:0.5em;
margin-left:1em;
}
#dropdown-links li a:hover {
float:left;
display: block;
font-family:Cusmyr;
font-size:14px;
background-color:#01A07E;
color:#797A7D;
text-decoration: none;
margin-top:0.5em;
margin-left:1em;
}
#more-dropdown li ul {
display: none;
width: 6em; /* Width to help Opera out */
background-color:#797A7D;
border:1px solid white;
}
#more-dropdown li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#more-dropdown li:hover li {
float: none;
background-color:#01A07E;
}
#more-dropdown li:hover li a {
color: #ffffff;
}
#more-dropdown li li a:hover {
}

Answer 1

switch
#nav a:hover
to
#nav:hover a
edit:
first: your <a> elements in the <li> elements have atop and left margins so they do not fill up the entire list item
second: the #nav li selector applies also to the list item in the dropdown list and you don't want them to float. This is because then the surrounding list items have height 0
I removed the float except for the first list item:
new fiddle:
http://jsfiddle.net/PZGLz/