How to use External JSP files

Hi,

 I am workin on a Jsp and html based webfront end. My problem is that i have this menu that is in every .jsp page and pages are like 20. Now if i need to change something in the menu i have to go manually in every file or page to change it.
Is there any way that i write the code in one file and create a link of that file in other pages just like you do with
External CSS files. Below is my code.
<script type="text/javascript">
<!--
function lite(obj) {
if(document.all&&!window.opera) {
obj.filters.blendTrans.apply();  
obj.filters.blendTrans.play();
}
}
-->




</script>



This is the code that is on my index page and i need this code to be placed in one file so that if i have to change any thing , i just need to change it from one file.


<div id="header">

               
                <img src="img/z.gif" width ="50" height="35" align ="left">
                <img src="img/b.gif"    width ="50" height="35" align ="right">
                <div id ="heading"> *********** </div>
           
       </div>
         
       
       <div id="menubar">
                 <ul>
                          <li><a href="index.jsp" onmouseover="lite(this)" onmouseout="lite(this)">Home</a></li>
                          <li><a href="Volumetric.jsp" onmouseover="lite(this)" onmouseout="lite(this)">Volumetrics</a></li>
                          <li><a href="kea.jsp" onmouseover="lite(this)" onmouseout="lite(this)">Error Analysis</a></li>
                          <li><a href="graph.jsp" onmouseover="lite(this)" onmouseout="lite(this)">Graphing</a></li>
                          <li><a href="scorecard.jsp" onmouseover="lite(this)" onmouseout="lite(this)">Scorecard</a></li>
                          <li><a href="contacts.jsp" onmouseover="lite(this)" onmouseout="lite(this)">Contact</a></li>
                          <li><a href="help.jsp" onmouseover="lite(this)" onmouseout="lite(this)">Help</a></li>
                          <li><a href="credits.jsp" onmouseover="lite(this)" onmouseout="lite(this)">Credits</a></li>
                </ul>
           
       </div>


Below is the code from the External CSS Sheets.

#header{
 
 height:1em;
 width: 63em;
 background: #c0c0c0;
 color:#000000;
 margin:0px;
 
  }


#menubar ul {

    margin: 0;
    padding: 0;
    list-style-type: none;
}

 #menubar li {
    margin: 1px 0 0;
   display: inline;
}

#menubar a {

width:120px;
padding: 5px 0px 10px 15px;
border: 3px solid white;
background: black;
text-decoration: none; /*lets remove the link underlines*/
color: white;
margin-left: -4;


filter:blendTrans(duration=0.5);

}
 
 
 #menubar a:link,  #menubar a:active,  #menubar a:visited {
   font-size: 80%;
   font-family: lucida fax;
   font-weight: bold;
   color: white;
}


#menubar a:hover {
border: 1px solid #000000;
background: red;
color: white;
}

Please help asap