У меня есть выпадающая панель навигации и под ней div с контекстом.
Раньше у меня была проблема, что выпадающие ссылки были за контекстом div. Я нашел решение, используя z-index. Сделал панель z-index 99 и contex div z-index -1.
Проблема в том, что все ссылки внутри div div contextx неактивны, свойство hover не работает. Даже функции JS, которые должны быть там, неактивны.
Как мне это исправить?
Я думаю, что лучшим решением будет сделать так, чтобы выпадающая панель отображалась над контекстным div без использования z-index, но как?
HTML-код:
<body>
<?php include ("login_bar.php");?>
<div id="header">
<div id="navbar" >
<nav class="dropdown">
<?php include ("navbar.php");?>
</nav>
</div>
<div id="logo">
</div>
</div>
<div id="wrapper1">
<div id="wrapper3">
<div id="picture">
</div>
<div id="selected_publications">
</div>
</div>
<div id="wrapper2">
dfgdg
</div>
<div id="wrapper4">
<div id="welcome">
<h3>welcome statement</h3>
Welcome to the NIBS. </br> some text here
</div>
<div id="tabs">
<ul id="tabmenu" >
<li><a href="https://www.facebook.com/" >First Page</a></li>
<li><a href="#" >Second Page</a></li>
<li><a href="#" >Third Page</a></li>
</ul>
<div id="content"> dfdsgdfg</div>
</div>
</div>
</div>
соответствующий код CSS:
.dropdown ul li:hover ul li a:hover
{
background:#666666;
color:#ffffff;
position:relative;
z-index:99;
}
#wrapper1
{
border-left:2px solid black;
border-right:2px solid black;
margin-left:50px;
margin-right:50px;
min-width:80%;
min-height:500px;
background:white;
height:100% ;
z-index:-1;
position:relative;
height:100%;
}