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

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> edo1493</h3>
<ul>
<li> Notifications </li>
<li> Messages </li>
<li> Settings </li>
<li> Log out </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