I have a list, which is going to be a menu.

I want to position it absolutely at the very top of the page.

My code looks like this:

<div id="sitenavmenu">
    <div id="sitenavmenu-content">

        <ul id="sitenavmenu-content-menu">              
            <li>Register</li>
            <li><%: Html.ActionLink("About", "About", "Home")%></li>
            <li>Contact Us</li>
        </ul>

    </div>
</div>

My CSS looks like this:

#sitenavmenu
{
    position:absolute;
    margin-left:300px;
    top:2px;
    width:500px;
}

#sitenavmenu-content-menu li
{
    list-style-type:none;
    display:inline;
    padding-right:5px;
    font-size:small;
}

The problem I have is, if I don't position it absolutely, it looks fine.

As soon as I position it absolutely (as it is shown above), the sitenavmenu div changes size, and although it shifts to the top, the sitenavmenu-content div appears below it. There is no other CSS as I have only just started, and I have checked padding etc. and everything is zero.

I just can't figure out why it's not working, and I don't want to hack it.

Edit: It's something to do with the height of #sitenavmenu. If I leave it, then the sitenav-content ends up horizontally centered in it, although #sitenavmenu is much taller. If I make them both the same size, so they should sit on top of each other, then the #sitenavmenu-content sits below.