CSS menu virker Firefox men ikke i Chrome
Hej jeg har denne css kode til en menu som virker i Firefox og IE men ikke i Google Chrome?Her har css koden:
@charset "utf-8";
/* CSS Document */
a, a:visited{color:#000; font-size:14px; font-weight: normal; text-decoration:none;}
a:hover{ color:#FFF; background-image:url(back.png); width: 64px; height: 24px; float:left; }
ul.navigation{list-style:none; font: 0.75em/1.5em normal Tahoma, Verdana, Geneva, sans-serif; text-align:center;}
ul.navigation li{ margin:1px; float:left; width: auto; min-width: 64px; height: 24px; }
ul.navigation li.highlight{ background-image:url(back.png); width: auto; min-width: 64px; height: 24px; }
ul.navigation li.highlight a{ color:#fff; cursor:default;}
Her har html koden:
<body>
<ul class="navigation">
<li class="highlight"><a href="index.html">Home</a></li>
<li><a href="product.html">Product</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</body>
Her har javascript koden:
$(document).ready(function(){
var str=location.href.toLowerCase();
$('.navigation li a').each(function() {
if (str.indexOf(this.href.toLowerCase()) > -1) {
$("li.highlight").removeClass("highlight");
$(this).parent().addClass("highlight");
}
});
})
