How to z-index a dropdown menu in a header?

Question

I am trying to add a dropdown menu in the right side of my top header, but I have got an issue with the "dropping down thing". The Header follows the menu, so it includes the nav and goes down, following what the menu is supposed to do. I think the problem is related to the z-indexes which I haven't set properly, but I am not quite sure.

I would like to have a dropdown menu in the header, without being followed by the header itself.

This is the right side of the Header.

    <div class="rightHeader">
            <div class="rightContainer">
                <div class="profile-nav">
                    <nav>
                        <ul>
                            <li><h3> <a href="profile.html"> edo1493</a></h3>
                                <ul>
                                    <li><a href="#"> Notifications </a></li>
                                    <li><a href="#"> Messages </a></li>
                                    <li><a href="#"> Settings </a></li>
                                    <li><a href="#"> Log out </a></li>
                                </ul>

                            </li>
                        </ul>
                    </nav>

                </div>
            </div>
        </div>

And this is the CSS:

.rightHeader .rightContainer .profile-nav nav ul ul{
display: none;
background-color: yellow;
}

.rightHeader .rightContainer .profile-nav nav ul li:hover> ul {
display: block;
}

.rightHeader .rightContainer .profile-nav nav ul {
list-style-type: none;
display: inline-table;
padding: 0;
margin: 0;  
}

.rightHeader .rightContainer .profile-nav nav ul:after {
content: ""; clear: both; display: block;
}

Any advice?

This is the Header's CSS:

#header-new{ position:fixed; width:100%; top: 0; left:0px; background-color:#3b3b3b;z-index: 1;}

Thanks

Answer 1

This will be accomplished with a simple change (adding position:absolute ):

.rightHeader .rightContainer .profile-nav nav ul ul{
    position:absolute;
    display: none;
    background-color: yellow;
}

This will then allow the navigation to fall below the header and not pull it with it.

See Example: http://jsfiddle.net/ZgzXE/12/

See: http://www.w3schools.com/css/css_positioning.asp for more information on positioning