Проблема с меню!

[liar_84]

Здравствуйте! Делаю меню для сайта, возникли трудности! При нажатии на список должен открываться контейнер div, смещая при этом нижнее меню! А при нажатии на нижнее меню соответственно нижнее меню съезжает вниз, а контейнер div появляется в середине.

При первом нажатии:все списки вместе с блоком съезжают.

При втором нажатии:

Не могу понять в чем проблема!

Html code:

<menu id="menu">
     <ul class="ulmenu menu1">
       	<li><a href="#">Меню 1</a>
        	<div class="tabmenu">ased</div>
        </li>
        <li><a href="#">Меню 2</a>
        	<div class="tabmenu">sds</div>
        </li>
        <li><a href="#">Меню 3</a>
        	<div class="tabmenu3">dfdfdf</div>
        </li>
        <li><a href="#">Меню 4</a>
        	<div class="tabmenu4"></div>
        </li>
        <li><a href="#">Меню 5</a>
        	<div class="tabmenu5"></div>
        </li>
    </ul>
    <ul class="ulmenu menu2">
    	<li><a href="#">Меню 6</a>
        	<div class="tabmenu6"></div>
        </li>
        <li><a href="#">Меню 7</a>
        	<div class="tabmenu7"></div>
        </li>
        <li><a href="#">Меню 8</a>
        	<div class="tabmenu8"></div>
        </li>
        <li><a href="#">Меню 9</a>
        	<div class="tabmenu9"></div>
        </li>
        <li><a href="#">Меню 10</a>
        	<div class="tabmenu10"></div>
        </li>
    </ul>
</menu>

Css code:

#menu{
	margin:0;
	padding:0;
	width:1024px;
	height:120px;
	border:1px solid #090;
	position:relative;
}
/*Стили для списков ul*/
.ulmenu{
	list-style:none;
	position:relative;
	margin:5px 0 30px;
}
/*Стили для списков li*/
.ulmenu li{
	display:inline;
	float:left;
	margin-right:20px;	
}

/*Стиль для ссылок*/
.ulmenu li a{
	text-align:center;
	text-decoration:none;
	display:block;
	border:1px solid #000;
	width:70px;
	}
/*стил для контейнера подменю div menu1*/
.menu1 li div{
	display:block;
	display:none;
	position:relative;
	border:1px solid #000;
	width:735px;
	height:30px;
	margin:1px 0 0;
	padding-left:10px;
	left:40px;/*совмещаем все блоки в один*/

}
/*стил для контейнера подменю div menu2*/
.menu2 li div{
	display:block;
	display:none;
	position:relative;
	border:1px solid #F00;
	width:735px;
	height:30px;
	margin:1px 0 0;
	padding-left:10px;
	left:40px;/*совмещаем все блоки в один*/
	bottom:-3px;
}

Jquery code:

$(function(){
    $('.ulmenu li a').click(function(){
        $('div[class^=tabmenu]').not($(this).next().slideToggle()).fadeOut();
    });
});

[psywalker]

liar_84,

Погоди, а покажи скриншоты того, как нужно, чтобы было, прям по пунктам, и того, как НЕ нужно.

[liar_84]

liar_84, Погоди, а покажи скриншоты того, как нужно, чтобы было, прям по пунктам, и того, как НЕ нужно.

Начальный вид:

Конечный вид: После нажатии на одно из меню контейнер div должен открыться между меню1-4 и меню5-8 сместив при этом меню5-8 вниз на высоту своего контейнера. Соответственно при повторном нажатии все возвращается в исходное состояние. Так же и при нажатии на одно из меню5-8, контейнер div раскрывается смещая нижнее меню на свою высоту.

[psywalker]

liar_84, Ясно, тогда вопрос:

Где тут между меню див?

<menu id="menu">
     <ul class="ulmenu menu1">
        <li><a href="#">Меню 1</a>
                <div class="tabmenu">ased</div>
        </li>
        <li><a href="#">Меню 2</a>
                <div class="tabmenu">sds</div>
        </li>
        <li><a href="#">Меню 3</a>
                <div class="tabmenu3">dfdfdf</div>
        </li>
        <li><a href="#">Меню 4</a>
                <div class="tabmenu4"></div>
        </li>
        <li><a href="#">Меню 5</a>
                <div class="tabmenu5"></div>
        </li>
    </ul>
    <ul class="ulmenu menu2">
        <li><a href="#">Меню 6</a>
                <div class="tabmenu6"></div>
        </li>
        <li><a href="#">Меню 7</a>
                <div class="tabmenu7"></div>
        </li>
        <li><a href="#">Меню 8</a>
                <div class="tabmenu8"></div>
        </li>
        <li><a href="#">Меню 9</a>
                <div class="tabmenu9"></div>
        </li>
        <li><a href="#">Меню 10</a>
                <div class="tabmenu10"></div>
        </li>
    </ul>
</menu>