a:hover not rendering correctly in Safari - html

Question

I am redesigning this website and other than a bit of content that still needs to be added, I thought I had all of the issues worked out. Unfortunately, when I checked the page in Safari, I discovered that the drop down nav menu isn't rendering properly. It works fine in all other browsers I've checked, but in Safari, when I hover over "Practice Areas" to get the drop down, all of the sub-categories are underlined.
(Unfortunately, I don't have enough reputation to post images, so you'll have to open the website in the different browsers to see what I'm talking about)
On every other browser, only the item you are actually hovering over is underlined.
My CSS code is:
/**NAV MENU**/
#sub_nav {
margin: 35px 0px 0px 550px;
font-size: 16px;
}
#sub_nav ul {
list-style: none;
}
#sub_nav li:hover {
text-decoration:underline;
}
#nav > li {
float: left;
}
#nav li {
display: block;
height: 2em;
line-height: 2em;
padding: 0 1.5em;
text-decoration: none;
background-color: #fff;
}
#nav li a {
text-decoration: none;
}
#nav ul {
position: absolute;
display: none;
z-index: 999;
}
#nav li:hover ul {
display: block;
}
#nav li ul li{
width: 145px;
}
and the html code is
<div id="sub_nav">
<ul id="nav">
<li>Home</li>
<li>Profile</li>
<li>
Practice Areas
<ul>
<li>Juvenile Law</li>
<li>White Collar Crimes</li>
<li>Drunk Driving</li>
<li>Sex Crimes</li>
<li>Domestic Violence</li>
<li>Drug Offenses</li>
</ul>
</li>
<li>Case Results</li>
<li>Contact Us</li>
</ul>
</div>
Also, I got the basis for the code from this website.
In case it matters, I have Safari 5.1.7

Answer 1

change:
#sub_nav li:hover {
text-decoration:underline;
}
width:
#sub_nav li a:hover {
text-decoration:underline;
}