Question

I have a simple drop down menu.
When i add other elements under the menu (like text for exemple) they are still visible even if the drop down menu is oppened. The drop down menu is somehow merged with the content under it, resulting in ugly superimposed content.

Here is my css :

ul#menu, ul#menu ul{
    margin: 0px;
    padding: 0px;
}

ul#menu li{
    width: 160px;
    margin: 4px 0px 0px 4px;
    padding: 5px;
    list-style: none;
    position: relative;
    float: left;
    background: #eef;
    border: #bbf solid 1px;
}

ul#menu li ul li{
    width: auto;
    margin: 4px 0px 0px 0px;
    float:none;
    display: none;
    background: #ddf;
    border: #bbf solid 1px;
}

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

ul#menu li:hover{
    background: #ddf;
}

ul#menu li ul li:hover{
    background: #ccf;
}

ul#menu li img{
    margin-right: 10px;
}

Here is my html :

<ul id="menu">
    <li>
        <span><img src="images/logos/file_small.png"><a href="#">Bilan</a></span>
        <ul>
            <li id="creer"><img src="images/logos/add_small.png"><a href="#">Créer</a></li>
            <li id="consulter"><img src="images/logos/other_small.png"><a href="#">Consulter / Modifier</a></li>
        </ul>
    </li>
    <li>
        <span><img src="images/logos/chartbar_small.png"><a href="#">Extract</a></span>
        <ul>
            <li><img src="images/logos/pdf_small.png"><a href="#">Pdf</a></li>
            <li><img src="images/logos/xls_small.png"><a href="#">Excel</a></li>
        </ul>
    </li>
    <li>
        <span><img src="images/logos/first_small.png"><a href="#">Module Conso/Gene</a></span>
    </li>
</ul>

I hope you can help. 🙂

Answer 1

http://jsfiddle.net/chrisvenus/GRfDT/2/ is a fiddle with your modifications and a solution.

What I did was firstly altered the margin to make sure the text appeared in the right place (ie increasing the top margin).

Then I modified the z-index on that text to put it behind the menu stuff. You could also have modified the z-index of the menus and it might even be best practice to put a z-index on both.

<div style="position: absolute; margin-top: 50px; z-index: -1"> SOME CONTENT </div>

z-index is basically designed for exactly this purpose – determining what order the content is in from background to foreground. For more information on it see http://www.w3.org/TR/CSS2/visuren.html#propdef-z-index

Also I shoudl note that kinakuta, although replying before your problem was fully explained, is right about the fact that you should probably be making your menu absolute rather than the content that follows it. Mainly because I suspect it will mean neater HTML overall since it will stop you having to either have a container with all your other content or making far more things absolute than you want or worst case nto making everythign take it into account so some things get moved about or overlayed by your absoluted text in other ways…

something like this: http://jsfiddle.net/chrisvenus/GRfDT/3/ (the same as before but with some swaps about where the position: absolute is)