liar_84

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

Здравствуйте! Делаю меню для сайта, возникли трудности! При нажатии на список должен открываться контейнер 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(); }); });