Hiya, I currently have this code for a hover effect for my navigation:

 

ul#navigation {
width: 573px;
height: 41px;
margin: 20px auto 0 auto;
padding: 0;
background: url(images/navigation_background.png) no-repeat;
}
ul#navigation li {
	float: left;
	margin: 2px 2px 0 2px;
	list-style: none;
	width: 110.5px;
	height: 37px;
	text-align: center;
	line-height: 40px; /* Center the text horizontally to the height of the ul */
	font-family: Calibri;
	font-size: 18px;
	color: #ffffff;
	background: url(images/navigation_button.png) no-repeat;
}

ul#navigation li:hover {
	background: url(images/navigation_highlight.png) no-repeat;
	width: 110.5px;
	height: 37px;
}

 

	<!-- Navigation -->
	<ul id="navigation">
		<li><a href="index.html" title="Home">Home</a></li>
		<li><a href="#" title="About">About</a></li>
		<li><a href="#" title="News">News</a></li>
		<li><a href="#" title="Events">Events</a></li>
		<li><a href="#" title="Contact">Contact</a></li>
	</ul>

 

But I'm having trouble with Google Chrome not displaying it correctly; I'm wondering if anyone can spot the problem?

 

Btw, It works fine in Firefox, Safari, IE 8!

 

This is the problem I'm getting:

 

 

What it's like in Firefox:

Edited April 19, 201016 yr by AdamConder

some browsers dont accept the :hover class apart from on links, so maybe try styling the links within the list instead of the list items

eg:

ul#navigation li a:link, ul#navigation li a:visited {
               display: block;
               float: left;
               margin: 2px 2px 0 2px;
               list-style: none;
               width: 110.5px;
               height: 37px;
               text-align: center;
               line-height: 40px; /* Center the text horizontally to the height of the ul */
               font-family: Calibri;
               font-size: 18px;
               color: #ffffff;
               background: url(images/navigation_button.png) no-repeat;
       }

       ul#navigation li a:hover {
               background: url(images/navigation_highlight.png) no-repeat;
               width: 110.5px;
               height: 37px;
       }

hope this helps

Or alternatively look at son of suckerfish dropdowns and the javascript he uses.

Will try the links instead thanks!

Using it on the a tag has worked perfect! Thank you