Горизонтальное меню на jQuery

[mark2011]

Всем привет!

Накодил сам меню на jQuery. Вот код:

<div class="menu-first">
		Пункт 1
	</div>
	<div class="menu-first-slider">
		<div class="menu-first-item">
			Подпункт 1
		</div>
		<div class="menu-first-item">
			Подпункт 2
		</div>
		<div class="menu-first-item">
			Подпункт 3
		</div>
	</div>
	<div class="menu-second">
		Пункт 2
	</div>

$(document).ready(function(){
	$('.menu-first').click(function()
	{
		if ($('.menu-first-slider').css('display') == 'none')
		{
			$('.menu-first-slider').slideDown(1000);
			$('.menu-first-slider').css('display', 'block');
		}	
		
		else
		{
			$('.menu-first-slider').slideUp(1000);
		}	
	});
});

CSS:

*
{
margin: 0;
padding: 0;
}


.menu-first
{
background-color: #FF8000;
color: #6B616D;
width: 10%;
margin-top: 1%;
margin-left: 1%;
padding-left: 2%;
padding-top: 1%;
padding-bottom: 1%;
font-weight: bold;
font-family: Arial;
font-size: 10pt;
cursor: hand;
}

.menu-first-slider
{
display: none;
}

.menu-first-item
{
background-color: #FF8000;
color: #6B616D;
width: 10%;
margin-left: 1%;
padding-left: 2%;
padding-top: 1%;
padding-bottom: 1%;
font-weight: bold;
font-family: Arial;
font-size: 10pt;
}

.menu-second
{
background-color: #FF8000;
color: #6B616D;
width: 10%;
float: left;
margin-left: 15%;
margin-top: -3.6%;

font-weight: bold;
font-family: Arial;
font-size: 10pt;
position: absolute;
top: 20;
left: 60;
}

Проблема в том, что когда меню "Пункт 1" "выплывает", то "Пункт 2" плывёт вместе с ним. Почему так происходит? Я ведь уже его абсолютно позиционировал в CSS... Мне нужно чтобы они отдельно по кликам рисовались, а на "Пункт 2" пока ничего не прописано. Странно...

[Megion]

Лучше так написать

HTML:

<div class="menu-first">
			<span>Пункт 1</span>
			<div class="slide">
				<div class="menu-first-item">
					Подпункт 1
				</div>
				<div class="menu-first-item">
					Подпункт 2
				</div>
				<div class="menu-first-item">
					Подпункт 3
				</div>
			</div>
		</div>
		<div class="menu-first">
			<span>Пункт 2</span>
			<div class="slide">
				<div class="menu-first-item">
					Подпункт 1
				</div>
				<div class="menu-first-item">
					Подпункт 2
				</div>
				<div class="menu-first-item">
					Подпункт 3
				</div>
			</div>
		</div>

JS:

$(document).ready(function(){
				$('.menu-first span').toggle(function()	{
					$(this).parent().find('.slide').slideDown(1000);
				},
				function(){
					$(this).parent().find('.slide').slideUp(1000);	
				});
			});

CSS:

.menu-first {
	background-color: #FF8000;
	color: #6B616D;
	float:left;
	width:10%;
	margin-top: 1%;
	margin-left: 1%;
	padding-left: 2%;
	padding-top: 1%;
	padding-bottom: 1%;
	font-weight: bold;
	font-family: Arial;
	font-size: 10pt;
	cursor: pointer;
	}
	.slide	{
		background-color: #FF8000;
		color: #6B616D;
		display:none;
		padding-left: 2%;
		padding-top: 1%;
		padding-bottom: 1%;
		font-weight: bold;
		font-family: Arial;
		font-size: 10pt; 
		}