Hi all,

I'm having a slight issue with some CSS I'm working on.

Basically it's a simple list. I'm trying to do a change color on hover. However, the link moves down a pixel or so when I hover over it and I dont want that.

The list is nested under another ul li tag. But I've checked using firebug and there's no inheritance that would make any values change.

I'm using Firefox 3.6 and Safari 4 and I get the same effect on both.

Here's the code:

HTML:
Code:
<div class="submenu-content">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>
And here's the CSS.

Code:
#sh-zone-menu-content .sh-zone-menu-content-sub .sh-zone-menu-content-sub-inner div.submenu-content {padding: 10px; text-transform:none; font-size: 11px; color: #ffffff;}
#sh-zone-menu-content .sh-zone-menu-content-sub .sh-zone-menu-content-sub-inner div.submenu-content h1 {margin: 0px 0px 10px 0px; font-family:Arial, Verdana, sans-serif; font-weight:bold; font-size: 12px; color: #829a38;}
#sh-zone-menu-content .sh-zone-menu-content-sub .sh-zone-menu-content-sub-inner div.submenu-content ul{list-style: none outside none;}
#sh-zone-menu-content .sh-zone-menu-content-sub .sh-zone-menu-content-sub-inner div.submenu-content ul li{margin: 0px 0px 3px 0px; padding:0px; float:none; width: 160px; height: auto; min-height: 15px; border-bottom: 1px solid #333;}
#sh-zone-menu-content .sh-zone-menu-content-sub .sh-zone-menu-content-sub-inner div.submenu-content ul li a{padding: 0px 0px 3px 10px; display:block; background: none; line-height: 16px; height: auto; font-size: 11px; font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif; text-decoration: none;}
#sh-zone-menu-content .sh-zone-menu-content-sub .sh-zone-menu-content-sub-inner div.submenu-content ul li a:hover{color: #829a38;}
Thanks.