everything works perfect local but when posted on the server it does nothing, am I missing something
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>menu</title> <style type="text/css"> body { font: 10px normal Arial, Helvetica, sans-serif; margin: 0; padding: 0; } .buttons { margin: 0 auto; } ul#topnav { margin: 0; padding: 0; float: left; width: 600px; list-style: none; position: relative; font-size: 14px; background-color:#666666 } ul#topnav li { float: left; margin: 0; padding: 0; border-right: 1px solid #555; } ul#topnav li a { padding: 3px 15px; display: block; color: #f0f0f0; text-decoration: none; } ul#topnav li:hover { background-color:#333333 } ul#topnav li span { float: left; padding: 3px 0; position: absolute; left: 0; top:22px; display: none; width: 600px; color: #fff; background-color:#ef041f } ul#topnav li:hover span { display: block; } ul#topnav li span a { display: inline; } ul#topnav li span a:hover {text-decoration: underline;} </style> <script type="text/javascript" src="file:jquerybuttons.js"></script> <script type="text/javascript"> $(document).ready(function() { $("ul#topnav li").hover(function() { //Hover over event on list item $(this).css({ 'background' : 'url(images_2.10/redgradtion.jpg) repeat-x'}); //Add background color + image on hovered list item $(this).find("span").show(); //Show the subnav } , function() { //on hover out... $(this).css({ 'background' : 'none'}); //Ditch the background $(this).find("span").hide(); //Hide the subnav }); }); </script> </head><body> <div class="container"> <ul id="topnav">
<li style="background: none repeat scroll 0% 0% transparent;"> <a href="#">Exhbits</a> <span style="display: none;"> <a href="#">custom & hybrids</a> | <a href="#">systems & Modular</a> | <a href="#">rentals</a>
<a href="#">case studies</a> </span> </li ><li style="background: none repeat scroll 0% 0% transparent;"> <a href="#">About</a> <span style="display: none;"> <a href="#">The Company</a> | <a href="#">The Team</a> | <a href="#">Careers</a>
</span> </li> <li style="background: none repeat scroll 0% 0% transparent;"> <a href="#">Services</a> <span style="display: none;"> <a href="#">What We Do</a> | <a href="#">Our Process</a> | <a href="#">Testimonials</a>
</span> </li> <li style="background: none repeat scroll 0% 0% transparent;"> <a href="#">Portfolio</a> <span style="display: none;"> <a href="#">graphic design</a> | <a href="#">Development</a> | <a href="#">Identity</a> | <a href="#">SEO & Internet Marketing</a> | <a href="#">Print Design</a>
</span> </li> <li style="background: none repeat scroll 0% 0% transparent;"><a href="#">Contact</a></li> </ul> </div> </body></html>