Во время верстки сайты вышла проблема: при открытии какого-либо меню, то нижние меню его перекрывают. как можно решить данную проблему? судя по всему проблема кроется в CSS и JS. заранее спасибо
вот скриншоты: [img]http://cs4688.vkontakte.ru/u6875632/112601150/z_cef74bec.jpg[/img] [img]http://cs4688.vkontakte.ru/u6875632/112601150/z_9149a2ea.jpg[/img]
Также прикрепляю JS и CSS-файлы:
JS
[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) });[/JS]
CSS
[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; }[/CSS]
|
|