Menu CSS active

[concric]

Tengo un menú que no termina de funcionar como yo quiero, el probelma es el siguiente:

La primera opción esta en active al clicar en la segunda la primera se desactiva y se activa la segunda, hasta aquí todo correcto pero al clicar en la tercera la segunda no se desactiva así con el resto.

Código HTML:

<link href="css/style.css" rel="stylesheet" type="text/css">

<div id="cubiertas">
<ul class="cubi">
<li class="" id="cubi">Opción 1</li>
<li class="" id="cubi">Opción 1</li>
<li class="" id="cubi">Opción 3</li>
<li class="" id="cubi">Opción 4</li>
<li class="" id="cubi">Opción 5</li>
<li class="" id="cubi">Opción 6</li>
<li class="" id="cubi">Opción 7</li>
</ul>
</div>

<script type="text/javascript">
$(document).ready(function()
{
	 $("ul.cubi li:first").addClass("[B][COLOR="Red"]active[/COLOR][/B]");
	 
	 $("ul.cubi li").click(function()
       {
		$("#cubi").removeClass("[B][COLOR="Red"]active[/COLOR][/B]");
		$(this).addClass("[B][COLOR="Red"]active[/COLOR][/B]");
		
		$(activeTab).fadeIn();
		return false;
	});
});
</script>