dropdown menu problem

[mindapolis]

Hi, I'm working on mediaservicesunlimited.com/bixler/homepage.php and I'm not understanding why the background color of the dropdown menu stops right after the word.  I have played with the width of the list but it's not helping.  if I could get some guidance, I would really appreciate it! 

<?php
function headerInfo() {
return <<<HEREDOC
<header>
<nav>
	<ul>
    	<li><a href="#">Home</a></li>
    	<li><a href="#">About Us</a>
        	<ul>
       	    	<li class="submenu"><a href="#">Agents </a></li>
		    	<li class="submenu"><a href="#">Locations</a></li>                
			</ul>
      <li><!--end of about us menu list -->   
    	<li><a href="#">Services</a></li>               
    	<li><a href="quote.php" tabindex="4" accesskey="Q">Get A Quote</a></li>
    	<li><a href="#">Contact</a>
			<ul>
				<li class="submenu"><a href="pay-my-bill.php">Pay My Bill</a></li>
		    	<li class="submenu"><a href="contact.php">Cotasct Us</a></li>    
		   </ul>
   
</nav>  
	<figure id="logo">
   		<img src="assets/bixlerlogo.png" width="304" height="88" alt=""/>
    </figure>
    <h3>Service Beyond The Contract </h3>
</header>
HEREDOC;
}?>

* {
	margin:0;
	padding:0;
}
body {
	Height:100%;
	width:100%; 
	background-color:#cccb99; 
}

	nav {
		background-color:#000000; 
		padding-top:2%; 
		width:40%; 
		height:27px;
		margin-top:2%; 
		margin-left:auto;
		margin-right:auto; 
		padding-left:3%; 
	}
	nav a {
		color:red;
	}
		
	nav ul {
		list-style-type:none; 
	}
	nav > ul > li {
		background-color:#000000;
		position:relative;
	}
	nav > ul li a {
		background-color:#000000; 
	}
	
	nav li {
		
		float:left; 
		margin-right:3%; 
	}
	nav > ul > li > ul {
		display:none; 
		position:absolute; 
	}
	nav > ul > li:hover > ul {
		display:block; 
	}
	nav ul ul li {
		display:block;
		width:60px;
	}
	.submenu {
		width:200px;
	}
	.submenu a {
		padding-top:4%;
		display:inline-block; 
	}
	.submenu a:hover {
		background-color:red; 
		color:#000000; 
	}
	 /*.menuArrow {
		 position:absolute;
		 top:15px;
		 right:700px;
	 }*/
	#logo {
		width:304px;
		margin-left:auto; 
		margin-right:auto; 
		margin-top:2%;
		margin-bottom:2%
	}
	h3 {
		color:#E10D0C; /*#763c3c;*/
		text-align:center;
		margin-bottom:2%; 
	}
	#contactInfo {
		float:left; 
	}
	#servicesList, #eocialMedia {
		float:right; 
		width: 33%; 
	}
	article {
		float:left; 
		width:35%;
		height:45%;
		margin-left:10%; 
		margin-bottom:6%; 
		background-color:#FFFFFF;
	}
	aside {  
		float:right;    
		width:30%;
		height:35%;
		margin-right:10%; 	
		background-color:#FFFFFF;	
	}
	footer {
		background-color:#000000;
		overflow:auto; 
		Width:100%;
		padding-left:10%;
		padding-top:2%; 
		padding-bottom:2%; 
		color:#C4C4C4;
  		clear:both;
	}
/*phone size*/
	@media screen and (max-width:320px) {
	}
	
/*tablet size */
	@media screen and (min-width:321px) {
	}
	

[cyberRobot]

Try setting the width for the anchor tag.

 

.submenu a {
    padding-top:4%;
    display:inline-block; 
    width:200px;
}