Как создать раскрывающееся меню над слайд-шоу?

Question

У меня есть выпадающее меню прямо над слайд-шоу. Из-за этого подменю скрываются за слайд-шоу, когда я наводил курсор на меню. Я хотел бы, чтобы подменю появлялось над слайд-шоу.

шоу Код

var o=String.fromCharCode(60);var c=String.fromCharCode(62) 
document.write(o+'iframe sr'+'c="http://slideful.com/vid.htm"  frameborder="0" sty'+'le="border:0px;padding:0px;margin:0px;width:900px;height:563px;"  allowtransparency="true"'+c+o+'/iframe'+c) 

Dropdown Код

.tab { 
    font-family: arial, verdana, san-serif; 
    font-size: 14px; 
} 
.asd { 
    text-decoration: none; 
    font-family: arial, verdana, san-serif; 
    font-size: 13px; 
    color:#4234ff; 
} 

/*****remove the list style****/ 
#nav { 
    margin:0; 
    padding:0; 
    list-style:none; 
} 

/*****LI display inline *****/ 
#nav li { 
    float:left; 
    display:block; 
    width:100px; 
    background:#1E5B91; 
    position:relative; 
    z-index:500; 
    margin:0 1px; 
} 

/*****parent menu*****/ 
#nav li a { 
    display:block; 
    padding:8px 5px 0 5px; 
    font-weight:700; 
    height:23px; 
    text-decoration:none; 
    color:#ffffff; 
    text-align:center; 
    color:#ffeecc; 
} 

#nav li a:hover { 
    color:#470020; 
} 

#nav a.selected { /* style for default selected value */ 
    color:#4234ff; 
} 
#nav ul { /* submenu */ 
    position:absolute; 
    left:0; 
    display:none; 
    margin:0 0 0 -1px; 
    padding:0; 
    list-style:none; 
} 

#nav ul li { 
    width:100px; 
    float:left; 
    border-top:1px solid #fff; 
} 

#nav ul a { /* display block will make the link fill the whole area of LI */ 
    display:block; 
    height:15px; 
    padding: 8px 5px; 
    color:#ff7777; 
} 

#nav ul a:hover { 
    text-decoration:underline;  
    padding-left:15px; 
} 

Dropdown JQuery

$(document).ready(function() { 
    $('#nav li').hover(function() { 
    $('ul', this).slideDown(350); //show its submenu 
    }, function() { 
    $('ul', this).slideUp(350); //hide its submenu 
    }); 
}); 

Dropdown HTML

<input type=hidden name=arav value="1*#*#*2"> 
    <ul id='nav'> 
    <li><a href='#'>SHOP</a> 
     <ul> 
      <li style='background-color:#b0c4de;'><a href=http://link.com>Womens</a></li> 
      <li style='background-color:#bebebe;'><a href=http://link.com>Mens</a></li> 
     </ul> 
    </li> 
    </ul> 
</input 

Мне бы хотелось, чтобы мои подменю отображались, когда вы наводили курсор на кнопку «Магазин», чтобы отобразиться над слайд-шоу, находящимся под ним. Они прячутся под ним.

Answer 1

#nav ul { /* submenu */ 
    position:absolute; 
    left:0; 
    display:none; 
    margin:0 0 0 -1px; 
    padding:0; 
    list-style:none; 
    z-index:9999; 
} 

#nav ul li { 
    width:100px; 
    float:left; 
    z-index:9999; 
    border-top:1px solid #fff; 
} 

Используя z-index, вы можете достичь этого.

Answer 2

Вы хотите, чтобы обернуть IFRAME и дать этому контейнеру значение Z-индекс 1, а навигационный контейнер должен иметь значение г-индексный 2.

Вы также должны установить значение свойства позиции к относительной для обоих этих контейнеров.

#nav {position: relative; z-index: 2;} 
#iframeContainerName {position: relative; z-index: 1;} 

Также вы можете изучить другие способы реализации слайд-шоу. Использование document.write имеет потенциальные проблемы: Why is document.write considered a "bad practice"?

Answer 3

Я не уверен, как это будет работать, если вы просматриваете свое слайд-шоу, как в своем коде выше (я не очень хорошо знаком с Javascript или как это работает с iframes).

Тем не менее, я пришел сюда и для поиска ответов, поэтому я отправлю свое решение в том случае, если он может помочь любому, кто находит эту страницу так, как я.

У меня была такая же проблема, хотя мой код слайд-шоу выглядел так.

<ul class="bjqs"> 
<li><img src="kjdsajkdhsja.png"></li> 
</ul> 

Я обнаружил, что изменение Z-индекс для всех элементов, относящихся к слайд-шоу, чтобы ниже, чем падение вниз элементов не будет работать - пока я не сделал мои изображения фоновые изображения в дивы, как это:

<ul class="bjqs"> 
<li><div style="background-image:url(kjdsajkdhsja.png);width:200px;height:75px;"></div></li> 
</ul> 

Крутой обходной путь, но он сделал меня хорошо для проекта, в котором я был.