Javascript-форум - Как автоматически скрыть список подменю

Добрый день! Пытаюсь сделать выдвигающееся меню с использованием js, вроде все работает, но если выпадающий список раскрыт и нажать на новый пункт меню, второй выпадающий список добавляется к первому. Не пойму как сделать чтобы списки убирались автоматически при нажатии разных кнопок меню
код меню:

<!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></title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slider.js"></script>

</head>

<body>
<div id="container">
<div id="header">



<ul class="menu"> 	
  
  <li><a class="menu_two" href="#two" >Создание сайтов</a></li>
       	 
        <li><a class="menu_thr" href="#thr" >Продвижение сайтов</a></li>
       	 
        <li><a class="menu_fou" href="#fou" >Дизайн</a></li>
       	 
        <li><a class="menu_fiv" href="#fiv" >Услуги</a></li>
       	 
        <li><a class="menu_six" href="#six" >О нас</a></li>
       </ul>

</div>
</div>
<ul class="two">
<li><a href="#">Ссылка #1</a></li>
<li><a href="#">Вебсайт #2</a></li>
<li><a href="#">Ссылка #1</a></li>
<li><a href="#">Ссылка #2</a></li>
<li><a href="#">Вебсайт #3</a></li>
<li><a href="#">Вебсайт #4</a></li>
<li><a href="#">Ссылка #3</a></li>
<li><a href="#">Ссылка #4</a></li>
</ul>
<ul class="thr">
<li><a href="#">Ссылка #1</a></li>
<li><a href="#">Вебсайт #2</a></li>
<li><a href="#">Ссылка #1</a></li>
<li><a href="#">Ссылка #2</a></li>

</ul>

</body>
</html>

slider.js

$(document).ready(function () {
    $('a.menu_two').click(function () {
	$('ul.two').slideToggle('medium');
	$(this).toggleClass("active");
    });
	  $('a.menu_thr').click(function () {
	$('ul.thr').slideToggle('medium');
	$(this).toggleClass("active");
    });
});

Стили:

Код:

body {

        font-family:Arial, Helvetica, sans-serif;

        font-size:12px;

        background-color: #333333;

}



#container {

        margin: auto;

        width: 490px;

}



#header {

        background-image: url(images/header.png);

        background-repeat: no-repeat;

        width: 567px;

        height: 43px;

        margin-bottom: 20px;

}



#button {

        height: 32px;

        width: 184px;

        margin: auto;

}



ul, li {

        margin:0; 

        padding:0; 

        list-style:none;

}



.menu_class {

        border:1px solid #1c1c1c;

}



.the_menu {

        display:none;

        width:300px;

        border: 1px solid #1c1c1c;

}



.the_menu li {

        background-color: #302f2f;

}



.the_menu li a {

        color:#FFFFFF; 

        text-decoration:none; 

        padding:10px; 

        display:block;

}



.the_menu li a:hover {

        padding:10px;

        font-weight:bold;

        color: #F00880;

}

.thr {

        display:none;

width: 1200px;

border: 1px solid #1c1c1c;

margin: 0 auto;

}



.thr li {

        background-color: #302f2f;

}



.thr li a {

        color:#FFFFFF; 

        text-decoration:none; 

        padding:10px; 

        display:block;

}



.thr li a:hover {

        padding:10px;

        font-weight:bold;

        color: #F00880;

}

.two {

        display:none;

width: 1200px;

border: 1px solid #1c1c1c;

margin: 0 auto;

}



.two li {

        background-color: #302f2f;

}



.two li a {

        color:#FFFFFF; 

        text-decoration:none; 

        padding:10px; 

        display:block;

}



.two li a:hover {

        padding:10px;

        font-weight:bold;

        color: #F00880;

}



.menu {

display: table;

position: relative;

top: 25px;

min-width: 900px;

left: 20px;

}

.menu li {

display: table-cell;

cursor: pointer;

text-align: center;

padding: 5px 0;

list-style: none;

}