Why doesn't this sub navigation element fill the entire area? - html

Question

I've tried everything I can do get the "Rentals" element to fill the entire width of the dropdown menu, but nothing seems to work. Any ideas? I've tried modifying widths, using nowrap, etc... nothing seems to work (ps. this is part of a custom responsive design so if something seems out of place it might be because I'm resetting something that was previously defined)
nav ul {
display: inline;
width: auto;
position: relative;
top: 70px;
list-style-type: none;
padding: 0px;
margin: 0px;
font-family: Raleway, Arial, sans-serif;
z-index: 10;
}
nav ul li {
display: inline-block;
position: relative;
width: auto;
list-style-type: none;
background-color: transparent;
padding: 0px;
}
nav ul li a {
display: inline;
color: #FFF;
font-size: 14px;
padding: 5px 5px;
text-decoration: none;
border-bottom: none;
}
nav ul a:hover,
nav ul a:active {
background-color: #9a1414;
}
nav ul ul {
display: none;
position: absolute;
top: 26px;
left: 0px;
z-index: 10;
}
nav ul li:hover > ul {
display: block;
background: #333;
border-top: 1px solid #666;
}
nav ul ul li {
float: left;
display: block;
margin-top: 5px;
margin-bottom: 5px;
}
<nav>
<ul id="nav">
<li>
Search
<ul>
<li>Search MLS
</li>
<li>Commercial
</li>
<li>Rentals
</li>
</ul>
</li>
<li>Agents
</li>
<li>Property Management
</li>
<li>Open Houses
</li>
<li>Local
</li>
<li>Blog
</li>
<li>Contact
</li>
</ul>
</nav>