Navigation Problem

[Strider64]

I'm doing a website for a client: Black Hawk Ranch 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

[Excavator]

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;
}

[Strider64]

Thanks Again, that solved the problem.