How do I position a drop-down navigation menu when the div is centered using margin:auto;?

Question

I have the basics of my navigation menu set up by floating three divs left within a #nav div that is centered using margin:auto;.

Only one of these nav menu options requires a drop down menu. I'm assuming that I'd have to bring the drop down menu out of normal flow so that it doesn't move the other floated objects.

This is my first project so I'm just trying to conceptually wrap my head around how to position this menu. I'm afraid that if I do a position relative with pixel values the menu might not show up under the original link depending on the user's screen size/resolution.

The red X marks the location of where the drop-down should appear.

Should this un-ordered be nested under the portfolio list item, or should it be a separate un-ordered list that is somehow positioned under the portfolio link? I'm afraid that if it's nested it might knock the bottom-border down with it?

I can post code, but I'm sort of at a loss on where to begin here. Looking for a push in the right direction!

Thanks

Answer 1

This is generally done this way:

<ul class=menu id=leftLinks>
    <li>about</li>
    <li>portfolio
        <ul class=submenu>
            <li>Submenu item</li>
        </ul>
</li>
</ul>


.menu > li {
    position: relative;
}

.submenu {
    position: absolute;
    left: 0;
    top: 100%;
}