Bouncing Accordion!

Bouncing Accordion!

I have a small problem, I have a menu, tab style going across the top of my content. What I want is, using the jQuery accordion effect, to have each tab slide up to reveal a picture. At the moment everything is positioned perfectly, the tabs slide up when you hover over them but instead of staying up whilst hovering over them they kind of bounce and do funny things. It would be great if they would stay up onMouseOver and go down onMouseOut.

This is a link to a *working* example on the internet
http://udwebdesign.co.uk/index2.html

----HERE IS THE CSS---


body {color:black; width:100%; height:auto; padding:0; margin-top: 75px; font:75%/120% 'lucida grande',tahoma,trebuchet; text-align:center;}
.header {background:; width:800px; height:25px; margin:auto; z-index:0; color: #777777;}
div.title {position:relative; height:100%; width: 200px; left:-10px;}
div.menu {position:relative; height:105px; width: 300px; top:-93px; left:480px; vertical-align:bottom;}
.footer {width:900px; height:35px; margin:auto; z-index:0; color:orange; text-align:right;}
#panel {position:relative; background:url('images/default/contentbg.png') 0 0 no-repeat; width:800px; height:600px; margin:auto;}
.tab {position:relative; width:75px; height:105px; margin:auto; display:table-cell; text-align:center; vertical-align:bottom;}
.ptab {background:url(images/default/menutab.png) 0 100% no-repeat; position:relative; height:30px; vertical-align:top; margin:auto;}
a {text-decoration:none; color:inherit;}
.slide {position:relative; height:75px; width:75px; bottom:0; margin:0; background:url('images/default/menuslide.png') 0 0 no-repeat;}
#one {display:none;}
#two {display:none;}
#three {display:none;}
#four {display:none;}


-----AND HERE IS THE HTML-----

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Untethered Dog web design. A new age in website construction. Unleashed soon.">
<meta name="keywords" content="website design, website construction, website building, web design, web, design, construction, building, html, css, javascript, flash, php, asp, ftp, server, domain, domain name, build websites, web site, site">
<link rel="stylesheet" href="ud2.css" />
<link rel="shortcut icon" href="http://udwebdesign.co.uk/favicon.ico" type="image/vnd.microsoft.icon" />
<link rel="icon" href="http://udwebdesign.co.uk/favicon.ico" type="image/x-icon" />

<title>untethered:dog</title>

<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="javascript/secure.js"></script>
<script type="text/javascript" language="javascript">

function slide(x){

$(x).slideToggle("slow");
$(this).toggleClass("active"); return false;

}

</script>
</head>

<body>

<!--Preload images-->
<!--End preload images-->

<div class="header">
<div class="title"><img src="images/udtitle.png" alt="image" width="200" height="40" /></div>
<!--Nav-->
<div class="menu">
<div class="tab" onMouseOver="slide('#one')" onMouseOut="slide('#one')"><a href="portfolio.html"><p class="ptab">portfolio</p></a><div class="slide" id="one"></div></div>

<div class="tab" onMouseOver="slide('#two')" onMouseOut="slide('#two')"><a href="index.html"><p class="ptab">homepage</p></a><div class="slide" id="two"></div></div>

<div class="tab" onMouseOver="slide('#three')" onMouseOut="slide('#three')"><a href="geekery.html"><p class="ptab">geekery</p></a><div class="slide" id="three"></div></div>

<div class="tab" onMouseOver="slide('#four')" onMouseOut="slide('#four')"><a href="about.html"><p class="ptab">about</p></a><div class="slide" id="four"></div></div>
</div>
<!--Nav-->
</div>

<div id="panel">
<!--Main Page Content (within slide box) Goes Below Here-->

<p class="test">
HOME
</p>
<!--Main Page Content (within slide box) Goes Above Here-->
</div>

<div class="footer">
<div>All rights reserved.</div>
</div>
</body>

</html>