Positioning Nested List in CSS on Hover - css

Question

I am creating a center, nested navigation menu, and am trying to use pure CSS. See a working demo HERE: http://jsfiddle.net/jenstechs/MKtTN/2/
HTML:
<nav>
<ul id="primary">
<li>Link One</li>
<li>Link Two</li>
<li>Link Threee
<ul class="secondary">
<li>Services One</li>
<li>Services Two</li>
</ul>
</li>
<li>Link Four</li>
<li>Link Fiiiiive</li>
</ul>
</nav>
CSS:
nav {
margin:15px auto 10px auto;
width:100%;
}
nav ul#primary {
width: 100%;
padding: 10px 0;
margin: 0;
background-color: #FFF;
text-align: center;
}
nav ul#primary>li {
display: inline;
padding:5px 0;
margin-left:0;
}
nav ul#primary>li>a {
padding: 0px 30px;
margin-right:-6px;
color: #000;
text-decoration: none;
border-right:2px solid #999;
}
nav ul#primary>li>a:hover,
nav ul#primary>li.active>a {
background-color: #900;
color:#FFF;
padding-top:10px;
padding-bottom:25px;
}
nav ul#primary>li:first-child a {
border-left:2px solid #999;
}
ul.secondary {
padding-top:0;
position:absolute;
display:none;
}
ul.secondary li {
}
nav ul#primary li:hover ul.secondary {
display:block;
}
nav ul#primary li:hover ul.secondary li {
}
ul.secondary li a {
display:block;
width:7em;
color:#FFF;
background-color:#900;
font-size:0.8em;
text-decoration:none;
text-align:left;
line-height:1.4em;
border-bottom:1px solid #FFF;
}
ul.secondary li:last-child a {
border-bottom:0;
}
ul.secondary li a:hover {
color:#DDD;
}
​
I also have a minimal reset, the only styles it has on lists is a few default margins.
Since this is a centered navigation bar, the CSS I'm using is inline, not floated. So I have no idea what to put in the CSS to position the sub-menu actually underneath its parent element. Most examples I've seen have position:absolute but that seems to keep it at the left. I've tried various methods of hiding and showing (display:, left:) but can't seem to find that magic combination.
Here I only have the one sub-list, actually, but what if I had sublists for all of them?
Thanks for any tips or links to examples...

Answer 1

To make position: absolute elements position relative to their parent, make the parent position: relative.
In your case:
nav ul#primary>li {
display: inline;
padding:5px 0;
margin-left:0;
position: relative;
}
Demo: http://jsfiddle.net/MKtTN/3/