Drop down menu appearing behind div

4
votes

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!

5
htmlcssdrop-down-menumenuz-index
Which browser do you use? – smartmeta
Hi there, I'm using Chrome but I have an answer now. Thanks a lot for taking a look for me. – Stotty146

5 Answers

3
votes

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.

2
votes

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;
}
1
votes

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;
}
0
votes

I can't comment because I don't have enough reputation, but the menu overlaps because your #menu and #main are both float:left, this mean they're taken out of normal flow which cause your problem.

I don't really understand why you've add float:left here since they doesn't fit on screen <1900px so if you don't need float, remove it and maybe replace with display:inline-block instead to fix your problem.

0
votes

Take a look in this solution:

    <style type="text/css">

    /* New */   
    #wrap {
        position: relative;
        min-height: 500px;
    }
    /* New */

    #menu {
        /* New */
        position: absolute;
        z-index: 999;
        /* New */

        width: 1000px;
        background-color: #eeeeee;
        border: 1px solid black;
        height: 50px;

    }

    #main {
        /* New */
        position: absolute;
        top: 50px;
        /* New */

        width: 1000px;
        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;
        position: relative;
    }

    #menu li ul {
        display: none;
    }

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

    #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;
    }
</style>


<div id="wrap"><!-- New -->
    <div id="menu">
        <ul>
            <li><a href="">Link1</a></li>
            <li><a href="">Link1</a></li>
            <li><a href="">Link3</a>
                <ul>
                    <li><a href="">SubLink1</a></li>
                    <li><a href="">SubLink2</a></li>
                </ul>
            </li>
            <li><a href="">Link4</a></li>
        </ul>
    </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>
</div><!-- New -->