How to make CSS menu stay on top

Question

I've modified some existing CSS code i found to develop a menu. It all works fine except when i hit the drop down menu. if there there is another HTML component on the page, the menu stays behind the component instead of it staying on top (i hope my description makes sense).

Here is the CSS:

#navMenu{
    /*font-family: 'Tenor sans', Calibri, Times, Times, serif;*/
    margin-left:2px;
    /*width: 944px;*/
    width:100%;
    font-weight:normal;
    font-size:15px;
}

#navMenu ul{
    margin:0;
    padding:0;
    line-height:30px;
}

#navMenu li {
    margin:0;
    padding:0;
    /*removes the bullet point*/
    list-style:none;
    float:left;
    position:relative;
    background-color:  #F9F9F9;
}

/*for top level */
#navMenu ul li a{
    text-align:center;
    font-weight:bold;
    font-size:0.8em;
    line-height:height;
    font-family:Arial,Helvetica,sans-serif;
    text-decoration:none; /*remove underline*/

    margin:-1px;
    /*height width for all links*/
    height:30px;
    width:150px;
    display:block;
    /*border-bottom: 1px solid #ccc;*/
    color: #00611C;
}

/* hiding inner ul*/
#navMenu ul ul{
    position:absolute;
    visibility:hidden;
    /*must match height of ul li a*/
    top:28px;
}

/*selecting top menu to display the submenu*/
#navMenu ul li:hover ul{
    visibility:visible;
}

#navMenu li:hover {
    /*background-color: #F9F9F9;*/
    background-color: #DBDB70;  
    border-radius: 5px;
}

#navMenu ul li:hover ul li a:hover{    
   /* color: E2144A;*/
   color:#E2144A;
}
#navMenu ul li a:hover{
    /*color: E2144A;*/
    color:#E2144A;
}

Would anybody be able to tell me whats missing to enable the drop down menu to stay on top?

thanks.

Answer 1

use z-index .

#navMenu{
    /*font-family: 'Tenor sans', Calibri, Times, Times, serif;*/
    margin-left:2px;
    /*width: 944px;*/
    width:100%;
    font-weight:normal;
    font-size:15px;
    z-index:1;
}

Answer 2

It would be useful to have the HTML code, not just the CSS, to troubleshoot this. But with just the CSS you posted, look into setting a z-index on the elements that are layered backwards from the way you would like.

http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/

https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index?redirectlocale=en-US&redirectslug=Understanding_CSS_z-index

Answer 3

Try giving your menu a z-index: 1; (or higher). You can also lower the z-index of whatever content is covering up your menu.

Answer 4

You need to set the parent that will wrap your menu to be in position: relative, this could be a body or maybe an outer wrapper. Then you can use absolute position to place it always at the top and specify some z-index:

For more information: see this z-index property information in here: https://bytutorial.com/tutorials/css/css-z-index