Drop down menu appearing behind div

html css drop-down-menu menu z-index

20,541

Solution 1

Use z-index to change z-axis position. Set it to any number greater than 1 (1 is default value) and set position property.

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

Solution 2

Make sure not to make the overflow hidden. If it is set to hidden, it will not allow your new divs (inside the parent element where overflow:hidden) to pop up or overlap other divs.

Solution 3

use position: relative; on #menu a like

#menu a {
color: black;
text-decoration: none;
display: block;
box-shadow: 5px 5px 5px grey;
background-color: #CCCCCC;
border: 1px outset grey;
border-radius: 5px;
position: relative;
}

20,541

Author by

Stotty146

I've recently started learning HTML and CSS in my spare time. I've nearly finished learning all the fundamentals and will be moving onto some programming languages soon.

Updated on April 17, 2020

Comments

Stotty146 about 4 years

I'm just learning HTML and CSS and I've started making my first layout template.

I've come across a problem when I've tried to use a drop down menu on my layout.

The menu drops down, but part of it is hidden behind the div that is below the menu bar.

I've tried adding a z-index to anything related to the menu, however I'm not too sure where to put it to get it to work properly.

If I remove the background-color from the #main div, you can see the rest of the drop down, but you can't actually click on the links because the drop down disappears again if you move the mouse outside of the div.

Here's the code I'm working with:

#menu {
    float: left;
    background-color: #eeeeee;
    width:1000px;
    border: 1px solid black;
    height: 50px;
}

#main {
    float: left;
    width: 990px;
    height: 50px;
    background-color: white;
    border: 1px solid black;
    padding-left: 10px;
}

/* Just making the links look a bit like buttons */

#menu ul {
margin-left: -2.5em;
}

#menu li ul {
display: none;
}

#menu li:hover ul {
display: block;
}

#menu li {
list-style-type: none;
width: 8em;
text-align: center;
float: left;
margin-right: 1em;
}

#menu a {
color: black;
text-decoration: none;
display: block;
box-shadow: 5px 5px 5px grey;
background-color: #CCCCCC;
border: 1px outset grey;
border-radius: 5px;
}

#menu a:hover {
background-color: #DDDDDD;
border: none;
box-shadow: 2px 2px 2px grey;
}

<!DOCTYPE HTML>
    
    <html lang="en-GB">
        
        <head>
            <meta charset="UTF-8">
            <title>Test</title>
            <link rel="stylesheet" 
                  type="text/css" 
                  href="test.css">
        </head>
        
        <body>
        
        <div id="menu">
        <ul>
           <li><a>Link1</a></li>
           <li><a>Link1</a></li>
           <li><a>Link3</a>
                <ul>
                    <li><a>SubLink1</a></li>
                    <li><a>SubLink2</a></li>
                </ul>
           </li>
           <li><a>Link4</a></li>
        </ul>
        </p>
        </div>
        
        <div id="main">
            
            <p>
                Lorem ipsum dolor sit amet, similique assueverit id pro. Agam insolens
                deterruisset ei usu. In eos vocent numquam, an exerci tamquam complectitur
                his.
            </p>
            
        </div>
        
        </body>
        
    </html>

How do I get the menu to drop down over the below div?? HELP!