I am getting a nasty flicker when hovering over a menu item in my wordpress site I am building for a client. I am trying to get the header image to change when each menu item is hovered over, and I have it pretty close, but both the menu item and the header image flicker really badly in both IE7 & FF3. The menu item I'm testing is the Contact page. Here's my code:
.page-item-11 a:hover {
background: url(http://www.myvegasrd.com/wp-content/themes/poetry/img/header-contact2.jpg) no-repeat;
position: relative;
z-index: 999999;
top: 0; left: 0;
width: 480px;
height: 222px;
margin: 0 auto;
margin-top: -307px;
margin-left: -432px;
text-indent: -999999px;
padding: 20px;
}
<div id=\"navigation\">
<ul id=\"menus\">
<li class=\"page_item page-item-14\"><a href=\"http://myvegasrd.com\" title=\"Home\">Home</a></li>
<li class=\"page_item page-item-16\"><a href=\"http://myvegasrd.com/blogger/\" title=\"Blog\">Blog</a></li>
<li class=\"page_item page-item-5\"><a href=\"http://myvegasrd.com/eat-well/\" title=\"Eat Well\">Eat Well</a></li>
<li class=\"page_item page-item-8\"><a href=\"http://myvegasrd.com/enjoy-moving/\" title=\"Enjoy Moving\">Enjoy Moving</a></li>
<li class=\"page_item page-item-10 current_page_item\"><a href=\"http://myvegasrd.com/meet-a-pro/\" title=\"Meet a Pro\">Meet a Pro</a></li>
<li class=\"page_item page-item-11\"><a href=\"http://myvegasrd.com/contact/\" title=\"Contact\">Contact</a></li>
</ul>
<div id=\"searchbox\">
<form action=\"http://myvegasrd.com\" method=\"get\">
<div class=\"content\">
<input type=\"text\" class=\"textfield\" name=\"s\" size=\"24\" value=\"\" />
<span class=\"switcher\" >Switcher</span>
</div>
</form>
</div>
</div>
The site is http://myvegasrd.com Just hover over the Contact page menu item and see what I mean. Any help would be greatly appreciated. Thanks.