I Have This Code And Want This Gradient As The Top Lil Bit Can Anyone Help Me?

http://www.thecommission.toyoo.be/tc/includes/grad.jpg

HTML Code:
<html>
<head>
<script type="text/javascript">
function open_safety()
{
window.open("../safety_popup.htm","_blank","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=yes, width=400, height=200")
}
</script>
<link rel="stylesheet" href="testscroll.css">
<!-- background-color:#CCCCCC; below is for the back of the text headers !-->
<style type="text/css">
.menutitle{
cursor:pointer;
margin-bottom: 10px;
background-color:#CD0000;
color:#000000;
width:140px;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:0px solid #000000;/* */
}
.submenu{
margin-bottom: 0.5em;
}
</style>
<script>
<!-- Begin
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=1,width=410,height=305,left = 392,top = 289');");
}
// End -->
</script>
<script type="text/javascript">
if (document.getElementById){
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}
function SwitchMenu(obj){
 if(document.getElementById){
 var el = document.getElementById(obj);
 var ar = document.getElementById("masterdiv").getElementsByTagName("span");
  if(el.style.display != "block"){
   for (var i=0; i<ar.length; i++){
    if (ar[i].className=="submenu")
    ar[i].style.display = "none";
   }   el.style.display = "block";
  }else{
   el.style.display = "none";
  } }}
</script>
<script>
function safety()
{
window.open ('../safety_popup.htm','Safety Tips!', config='height=100,width=100,toolbar=no,menubar=no,scrollbars=yes,resizable=no,location=no,directories=no,status=yes');
}
</script>
<title>Navigation</title>
<style type="text/css">
<!--
 
body,td,th {
 
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 10px;
 color: #000000;
}body {
 
 background-color: #0066ff;
}a:link {
 
 color: #000000;
 text-decoration: none;
}a:visited {
 
 text-decoration: none;
 color: #000000;
}a:hover {
 
 text-decoration: underline;
 color: #000000;
}a:active {
 
 text-decoration: none;
 color: #000000;
}-->
</style>
<!-- background-color: #FF9900; above is for background of whole page !-->
  <tr> 
    <td><table width="145" border="1" align="left" cellpadding="0" cellspacing="0" bordercolor="#000000">
        <tr> 
          <td width="141" bgcolor="#CD5555">
            <!-- Keep all menus within masterdiv-->
            <!-- color here is for the background of text !-->
   <div id="masterdiv"> 
            <div class="menutitle" onClick="SwitchMenu('sub1')">Main</div>
            <span class="submenu" id="sub1">  
<BR> LINK HERE    
<BR> LINK HERE      
<BR> LINK HERE      
<BR> LINK HERE            </span> 
            <div class="menutitle" onClick="SwitchMenu('subAL')">Messages</div>
            <span class="submenu" id="subAL">             </span> 
            <!-- <div class="menutitle" onClick="SwitchMenu('sub2')"></div>
            <span class="submenu" id="sub2">             </span>  -->
            <div class="menutitle" onClick="SwitchMenu('hhh')">Crime Scene</div>
   <span class="submenu" id="hhh">    </span>
            <div class="menutitle" onClick="SwitchMenu('games')">Radio</div>
            <span class="submenu" id="games"> </span> 
            <div class="menutitle" onClick="SwitchMenu('sub3')">Cars</div>
            <span class="submenu" id="sub3"> I'm new *Soon*<br>
                        </span> <div class="menutitle" onClick="SwitchMenu('subHF')">Casino</div>
            <span class="submenu" id="subHF"> </span> <div class="menutitle" onClick="SwitchMenu('sub4')">Your Profile</div>
            <span class="submenu" id="sub4">    
   </td>
        </tr>
      </table>
      &nbsp;</td>
  </tr>
</table>
</td></body>
</html>