Expand/Collapse Menu not working in Firefox

Expand/Collapse Menu not working in Firefox

Hello all,
 
I have created a menu using a tables/list which is expandable/collapsable. Could someone please have a look over this code and assist with help me in figuring out why it wont work in firefox. The menu works 100% ok in IE 8, so im not too sure whats going on, usually things work in firefox, but not IE 8 lol... Code is as follows (.zip file of menu has also been attached), Thanks!:
 
JavaScript:
  1. function initMenu() {
     
      $('#menu ul').hide();
      $('#menu li a').click(
        function() {
       
            $(this).next().slideToggle('normal');
           
          /*if($('#imgArrow').attr('src') == 'down.png') {
            $('#imgArrow').attr('src','right.png');
        } else {
            $('#imgArrow').attr('src','down.png');
        } */
        }
        );
      }
     
    $(document).ready(function() {initMenu();});

















 
HTML:
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-EN">
    <head>
     <script src="jquery.js" type="text/javascript"></script>
     <script src="menu-collapse.js" type="text/javascript"></script> 
     
     <link rel="stylesheet" type="text/css" href="style.css" />
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>sample_menu</title>
     
     <!--[if lt IE 8]>
        <style type="text/css">
        li a {display:inline-block;}
        li a {display:block;}
        </style>
       <![endif]-->
      
    </head>
    <body>

















  2. <table id="menutable">
    <tbody id="menutbody">
     
     <ul id="menu">
     
     <tr>
     <td>
      <li>
       <a href="#">News</a>
       <ul>
        <li><a href="#">National</a></li>
        <li style="border-bottom: 1px #cab986 solid;"><a href="#">Jurisdictions</a></li>
       </ul>
      </li>
     </td>
     </tr>
     
     <tr>
     <td>
      <li>
       <a href="#">Downloads</a>
       <ul>
        <li><a href="#">Documentation</a></li>
        <li style="border-bottom: 1px #cab986 solid;"><a href="#">National Electronic Form (NEF)</a></li>
       </ul>
      </li> 
     </td>
     </tr>
     
     <tr>
     <td>
      <li>
       <a href="#">Reports</a>
       <ul>
        <li><a href="#">General</a></li>
        <li><a href="#">Saved Personal Reports</a></li>
        <li><a href="#">Personal Report Wizard</a></li>
        <li style="border-bottom: 1px #cab986 solid;"><a href="#">Current Participation Report</a></li>
       </ul>
      </li>
     </td>
     </tr>
     
     <tr>
     <td>
      <li>
       <a href="#">Help</a>
       <ul>
        <li style="border-bottom: 1px #cab986 solid;"><a href="#">Frequently Asked Questions</a></li>
       </ul>
      </li>
     </td>
     </tr> 
     
     <tr>
     <td>
      <li>
       <a href="#">Agency</a>
       <ul>
        <li><a href="#">Create</a></li>
        <li><a href="#">List</a></li>
        <li><a href="#">Search</a></li>
        <li><a href="#">Download Register</a></li>
        <li><a href="#">Edit Agencies</a></li>
        <li style="border-bottom: 1px #cab986 solid;"><a href="#">Users</a></li>
       </ul>
      </li>
     </td>
     </tr>
      
     <tr>
     <td>
      <li>
       <a href="#">User</a>
       <ul>
        <li><a href="#">Create</a></li>
        <li><a href="#">List</a></li>
        <li><a href="#">Search</a></li>
        <li><a href="#">Change my own details</a></li>
        <li style="border-bottom: 1px #cab986 solid;"><a href="#">Users</a></li>
       </ul>
      </li>
     </td>
     </tr>
     
     <tr>
     <td>
      <li>
       <a href="#">Data Access Register</a>
       <ul>
        <li><a href="#">View Register</a></li>
        <li><a href="#">Create Entry</a></li>
        <li><a href="#">Protocol and Request Form</a></li>
        <li><a href="#">Data Access Register Help</a></li>
        <li style="border-bottom: 1px #cab986 solid;"><a href="#">Users</a></li>
       </ul>
      </li>
     </td>
     </tr>
     
     <tr>
     <td>
      <li>
       <a href="#">Reports</a>
       <ul>
        <li><a href="#">General</a></li>
        <li><a href="#">Saved Personal Reports</a></li>
        <li><a href="#">Personal Report Wizard</a></li>
        <li><a href="#">Current Participation report</a></li>
        <li style="border-bottom: 1px #cab986 solid;"><a href="#">Users</a></li>
       </ul>
      </li>
     </td>
     </tr>
      
     </ul>
     
    </tbody>
    </table>
     
    </body>
    </html>
























































































































 
CSS:
  1. tbody#menutbody {
      font-family: Helvetica, Arial, sans-serif;
      font-size: 0.7em;
        
    }



  2. table#menutable {
       list-style-type:none;
      width: 12em;
    }


  3. ul#menu, ul#menu ul {
      list-style-type:none;
      margin: 0;
      padding: 0;


  4. }
  5. ul#menu a {
      display: block;
      text-decoration: none; 
    }


  6. ul#menu li {
      margin-top: 1px;
      background: #cab986;
    }


  7. ul#menu li a {
      background: #cab986;
      color: #410057; 
      font-weight: bold;
      padding: 0.5em;
    }




  8. ul#menu li a:hover {
      background: #A38C47;
    }

  9. ul#menu li ul li a {
      background: #fcfbf8;
      color: #410057;
      font-weight: normal;
      padding-left: 20px;
      border-left: 1px #cab986 solid;
      border-right: 1px #cab986 solid
    }






  10. ul#menu li ul li a:hover {
      background: #EDE8D6;
      border-left: 5px #cab986 solid;
      padding-left: 15px;
    }



Thanks