Перекрытие меню

[choppylion]

Во время верстки сайты вышла проблема: при открытии какого-либо меню, то нижние меню его перекрывают.

как можно решить данную проблему? судя по всему проблема кроется в CSS и JS. заранее спасибо

вот скриншоты:

Также прикрепляю JS и CSS-файлы:

JS

function lalala(x){

// Сверху элемент select, который будет замещаться:

var selectBoxContainer = $('<div>',{

width : x.outerWidth(),

className : 'tzSelect',

html : '<div class="selectBox"></div>'

});

var dropDown = $('<ul>',{className:'dropDown'});

var selectBox = selectBoxContainer.find('.selectBox');

// Цикл по оригинальному элементу select

x.find('option').each(function(i){

var option = $(this);

if(i==x.attr('selectedIndex')){

selectBox.html(option.text());

}

// Так как используется jQuery 1.4.3, то мы можем получить доступ

// к атрибутам данных HTML5 с помощью метода data().

if(option.data('skip')){

return true;

}

// Создаем выпадающий пункт в соответствии

// с иконкой данных и атрибутами HTML5 данных:

var li = $('<li>',{

html: '<img src="'+option.data('icon')+'" /><span>'+

option.data('html-text')+'</span>'

});

li.click(function(){

selectBox.html(option.text());

dropDown.trigger('hide');

// Когда происходит событие click, мы также отражаем

// изменения в оригинальном элементе select:

x.val(option.val());

return false;

});

dropDown.append(li);

});

selectBoxContainer.append(dropDown.hide());

x.hide().after(selectBoxContainer);

// Привязываем пользовательские события show и hide к элементу dropDown:

dropDown.bind('show',function(){

if(dropDown.is(':animated')){

return false;

}

selectBox.addClass('expanded');

dropDown.slideDown();

}).bind('hide',function(){

if(dropDown.is(':animated')){

return false;

}

selectBox.removeClass('expanded');

dropDown.slideUp();

}).bind('toggle',function(){

if(selectBox.hasClass('expanded')){

dropDown.trigger('hide');

}

else dropDown.trigger('show');

});

selectBox.click(function(){

dropDown.trigger('toggle');

return false;

});

// Если нажать кнопку мыши где-нибудь на странице при открытом элементе dropDown,

// он будет спрятан:

$(document).click(function(){

dropDown.trigger('hide');

});

}

$(document).ready(function(){

var select = $('select.makeMeFancy1');

lalala(select)

var select = $('select.makeMeFancy2');

lalala(select)

var select = $('select.makeMeFancy3');

lalala(select)

});

CSS

*{

margin:0;

padding:0;

}

body{

color:#eee;

background-color:#141414;

font:15px Calibri,Arial,sans-serif;

}

#page{

width:490px;

margin:50px auto;

}

#page h1{

font-weight:normal;

text-indent:-99999px;

overflow:hidden;

background:url('../img/your_product.png') no-repeat;

width:490px;

height:36px;

}

#page form{

margin:20px auto;

width:460px;

}

.tzSelect{

/* Контейнер для нового элемента select */

height:34px;

display:inline-block;

min-width:460px;

position:relative;

/* Предварительная загрузка фонового изображения для выпадающих пунктов */

background:url("../img/dropdown_slice.png") no-repeat -99999px;

}

.tzSelect .selectBox{

position:absolute;

height:100%;

width:100%;

/* Установка шрифта */

font:13px/34px "Lucida Sans Unicode", "Lucida Grande", sans-serif;

text-align:center;

text-shadow:1px 1px 0 #EEEEEE;

color:#666666;

/* Использование множественных фонов CSS3 */

background:url('../img/select_slice.png') repeat-x #ddd;

background-image:url('../img/select_slice.png'),url('../img/select_slice.png'),url('../img/select_slice.png'),url('../img/select_slice.png');

background-position:0 -136px, right -204px, 50% -68px, 0 0;

background-repeat: no-repeat, no-repeat, no-repeat, repeat-x;

cursor:pointer;

-moz-border-radius:3px;

-webkit-border-radius:3px;

border-radius:3px;

}

.tzSelect .selectBox:hover,

.tzSelect .selectBox.expanded{

background-position:0 -170px, right -238px, 50% -102px, 0 -34px;

color:#2c5667;

text-shadow:1px 1px 0 #9bc2d0;

}

.tzSelect .dropDown{

position:absolute;

top:40px;

left:0;

width:100%;

border:1px solid #32333b;

border-width:0 1px 1px;

list-style:none;

-moz-box-sizing:border-box;

-webkit-box-sizing:border-box;

box-sizing:border-box;

-moz-box-shadow:0 0 4px #111;

-webkit-box-shadow:0 0 4px #111;

box-shadow:0 0 4px #111;

}

.tzSelect li{

height:85px;

cursor:pointer;

position:relative;

/* Использование множественных фонов CSS3 */

background:url('../img/dropdown_slice.png') repeat-x #222;

background-image:url('../img/dropdown_slice.png'),url('../img/dropdown_slice.png'),url('../img/dropdown_slice.png');

background-position: 50% -171px, 0 -85px, 0 0;

background-repeat: no-repeat, no-repeat, repeat-x;

}

.tzSelect li:hover{

background-position: 50% -256px, 0 -85px, 0 0;

}

.tzSelect li span{

left:88px;

position:absolute;

top:27px;

}

.tzSelect li i{

color:#999999;

display:block;

font-size:12px;

}

.tzSelect li img{

left:9px;

position:absolute;

top:13px;

}

/* Стили страницы */

#footer{

background-color:#212121;

position:fixed;

width:100%;

height:50px;

bottom:0;

left:0;

}

.tri{

border-color:transparent transparent #212121;

border-style:solid;

border-width:20px 17px;

height:0;

left:50%;

margin:-40px 0 0 -400px;

position:absolute;

top:0;

width:0;

}

#footer h1{

font-size:40px;

font-weight:normal;

left:50%;

margin-left:-400px;

padding:4px 0;

position:absolute;

width:600px;

}

a, a:visited {

text-decoration:none;

outline:none;

border-bottom:1px dotted #97cae6;

color:#97cae6;

}

a:hover{

border-bottom:1px dashed transparent;

}

.clear{

clear:both;

}

[Vlad]

Многа букаф, в код вдаваться не хочется. Попробуйте z-index задать, обычно помогает.

[choppylion]

спасибо! помогло