JQuery Menu Not Working in IE8
Anyone know why my jQuery IE8 menu isn't working? Works in FF:
HTML:
- <html>
- <head>
- <link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
- <link href="stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
- <script langugage="javascript" src="javascripts/jquery.js"></script>
- <script langugage="javascript" src="javascripts/page.js"></script>
- </head>
- <body>
- <div id="menu">
- <ul>
- <li><a href="#about">About</a></li>
- <li><a href="#work">Work</a></li>
- <li><a href="#contact">Contact</a></li>
- <li><a href="#blog">Blog</a></li>
- <li><a href="#twitter">Twitter</a></li>
- </ul>
- </div>
- </body>
- </html>
JS:
- $(document).ready(function() {
- $("#menu").animate({top: 0}, 500);
-
- $("#menu a").click(function(e) {
- anchor = $(this).attr("href");
- e.preventDefault();
- $('html, body').animate({ scrollTop: $(anchor).offset().top}, 1000);
- });
- });
CSS:
- #menu ul {
- opacity: 1;
- list-style: none;
- list-style-type: none;
- }
- #menu ul li {
- list-style-image: none;
- list-style-type: none;
- margin-left: 0px;
- }
- #menu ul, #menu ul li {
- margin: 0px;
- padding: 0px;
- display: inline;
- }
- #menu ul a {
- /* margin-top: -3em;*/
- text-decoration: none;
- border-top: 8px solid #fff;
- display: block;
- float: left;
- margin-right: 1em;
- padding-top: 0.5em;
- font-size: 0.6em;
- width: 5em;
- letter-spacing: 0.2em;
- background: transparent;
- }
- #menu ul a:hover {
- border-color: #f89805;
- }