Heya guys/girls.

The code so far!

index.htm
Code:
<!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>Test Site</title>

<LINK href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->

</head>

<body onload="MM_preloadImages('images/Logo_Down.png','images/Info_Down.png','images/News_Down.png','images/Ballers_Down.png','images/Shop_Down.png')">

<div id="main_nav" class='noSelect'>
  <div id="main_nav_logo"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','images/Logo_Down.png',1)"><img src="images/Logo_Up.png" name="Image6" width="94" height="95" border="0" id="Image6" /></a></div>
  <div id="accordion"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','images/News_Down.png',1)"><img src="images/News_Up.png" name="Image9" width="178" height="38" border="0" id="Image9" /></a>
    <ul>
      <li><a href="http://www.google.com">Google</a></li>
      <li><a href="http://www.msn.com">MSN</a></li>
      <li><a href="http://www.yahoo.com">Yahoo</a></li>
      </ul>
      <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','images/Info_Down.png',1)"><img src="images/Info_Up.png" name="Image7" width="178" height="38" border="0" id="Image7" /></a>
        <ul>
          <li><a href="http://www.google.com">Google</a></li>
          <li><a href="http://www.msn.com">MSN</a></li>
          <li><a href="http://www.yahoo.com">Yahoo</a></li>
        </ul>
      <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','images/Ballers_Down.png',1)"><img src="images/Ballers_Up.png" name="Image5" width="178" height="37" border="0" id="Image5" /></a>
    <ul>
        <li><a href="http://www.msn.com">MSN</a></li>
        <li><a href="http://www.yahoo.com">Yahoo</a></li>
    </ul>
        <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','images/Shop_Down.png',1)"><img src="images/Shop_Up.png" name="Image8" width="178" height="38" border="0" id="Image8" /></a>
        <ul>
            <li><a href="http://www.msn.com">MSN</a></li>
            <li><a href="http://www.yahoo.com">Yahoo</a> </li>
    </ul>
</div>
</div>
And the style sheet.
Code:
   body {  
   overflow:hidden;
   color: #FFFF00;
   font: 13px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
   background-color: #FFF;
   margin: 0;
   margin-left: 4px;
   }
   
#accordion li {
	padding: 0;
	font-size: 18px;
/*  line-height: 23px;*/
	letter-spacing: -1px;
	list-style-type: none;
	margin: 0;
}

#accordion ul {
  margin: 0;
	padding: 0;
}

#bottom_right_buttons {
	background-color: white;
	width: 200px;
	height: 30px;
	position: fixed;
	right: 0;
	bottom: 0;
	margin-right: 30px;
	margin-bottom: 15px;
}

#top_right_buttons {
	background-color: white;
	width: 200px;
	height: 30px;
	position: fixed;
	right: 0;
	top: 0;
	margin-right: 30px;
	margin-top: 15px;
}

/* @group navigation */

#main_nav {
	width: 200px;
	margin-left: 40px;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	background-color: #000000;
	filter: alpha(opacity = 70);
	opacity: 0.7;
	  }

#main_nav_logo {
	margin: 15px;
	}

#main_nav a {
  outline: none;
  }

#accordion {
	margin: 40px 15px 15px;
	text-transform: uppercase;
	}

#accordion a.top_menu {
	font-size: 48px;
	color: #FFFF00;
	margin: 0 0 5px;
	padding: 0;
	font-weight: bold;
	}

#accordion a {
	color: #FFFF00;
	text-decoration: none;
	opacity: 0.3;
	cursor: hand;
	border: none;
	}

#accordion a:hover {
	color: #FFFF00;
	text-decoration: none;
	opacity: 1;
	cursor: hand;
	border: none;
	}
li.headlink ul { 
display: none; 
}

li.headlink:hover ul { 
display: block; 
}
Yes I know it's messy as hell!

Basically I've been playing with jQuery accordion which isn't as smooth as I'd hoped (And I'm not JS scripter!) so am looking for reccommendations for something you've used previously and really liked.

I'd appreciate it if you could point me towards something i could lock open on certain pages without too much headache (accordion was terrible for that).

Thanks, please feel free to move this if it isn't in the correct section! I couldn't make my mind up as to where to put it