Navigation Problem

I'm doing a website for a client: Black Hawk Ranch (http://www.pepster.com/blackhawkranch/index.html) and I am having problem with the links:

I wand only an underline at the bottom of the navigation button, not all three lines like it is current doing.

Here's the HTML Code:
<div id="nav">
<ul>
<li><a href="index.html"><span class="nav-style subselected">Black Hawk Ranch <br />
Pictures <br/>

The Saga Continues</span></a></li>
<li><a href="#"><span class="nav-style">Black Hawk Ranch <br />
Excavating <br />
Mid Michigan Service</span></a></li>
<li><a href="the-kids.html"><span class="nav-style">Pictures of <br />
the Kids<br />

Life's Little Miracles</span></a></li>
<li><a href="#"><span class="nav-style">Let's Talk <br />
Politics <br />
Articles &amp; Commentary</span></a></li>
<li><a href="#"><span class="nav-style">Ask <br />

herbie.com <br />
Advice from A to Z</span></a></li>
</ul>
</div>

Here is the CSS Code:
#nav ul li a {
display: block;
width: 200px;
height: 50px;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;

color: #fff;
text-decoration: none;
text-align: left;
padding: 0px;
margin: 0px;
}

#nav ul li a:hover {

text-decoration: underline;
}

I've tried a few things, but either it separates the trees too much or drops them down. If someone would be point me in the right direction, I would very much appreciate it. It's probably a simple solution and I probably will go duh when I see the fix. LOL

Thanks John

Hello Strider64,
Instead of underlining the text in your anchor, underline the anchor itself... like this - #nav ul li a:hover {

border-bottom: 1px solid #f00;
}

Thanks Again, that solved the problem.