Home/ Questions/Q 7740561
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T08:48:40+00:00

I have a dropdown navigation panel and below it a div with context. Before

  • 0

I have a dropdown navigation panel and below it a div with context.
Before I had a problem that the droped down links were behind the context div. I found a solution to that using z-index. Made the panel z-index 99 and the contex div z-index -1.

The problem now is that all the links inside the contex div are inactive, the hover property doesn’t work. Even the JS functions that are supposed to be there are inactive.
How do I fix that?
Best solution, I think, will be to make, somehow, the dropdown panel appear above context div without using z-index, but how?

html code:

<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>

relevant css code:

.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%;    
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try adding this:

    #wrapper1 {
    position:relative;
    z-index:1;
}

#header {
    position:relative;
    z-index:2;
}

    This should ensure the z-index stack starts at a higher level for the header than for the content, keeping header elements on top

    • 0