[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" пока ничего не прописано. Странно...