正确放置子菜单（HTML / CSS）

Question

How can I get the sub-menu for guides to align underneath? Resizing the window or centering the main menu makes it look off.

This is part of the code:

        <div id = "navbar">
            <dl id = "top-menu">
                <dt class = "top-button"><a href = "index.html">HOME</a></dt>
                <dt class = "top-button"><a href = "database.html">DATABASE</a></dt>
            </dl>
            <dl id = "guide-top">
                <dt class = "top-button" id = "guide"><a href = "guides.html">GUIDES</a></dt>
                    <dt class = "guide-sub sub1" id = "guide"><a href = "test1.html">Test 1</a></dt>
                    <dt class = "guide-sub sub2" id = "guide"><a href = "test2.html">Test 2</a></dt>
                    <dt class = "guide-sub sub3" id = "guide"><a href = "test3.html">Test 3</a></dt>
            </dl>
            <dl id = "top-menu">
                <dt class = "top-button"><a href = "forums.html">FORUMS</a></dt>
            </dl>
        </div>

This is the CSS for this bit:

#header{height : 87px; padding-top : 20px}
#navbar{margin : auto; width : 1024px; height : 42px; background : rgba(20,20,20,0.4)}
dt.top-button{display : block; float : left; width : 150px; height : 41px; border : 1px solid black}
dt a{display : block; color : white; text-decoration : none; width : 150px; height : 30px; padding-top : 12px}
dt a:hover{background : rgba(255,255,0,0.4)}
dt.guide-sub{position : absolute; left : 304px; top : 149px; width : 150px; height : 41px; border : 1px solid black; background : rgba(20,20,20,0.4);}
dt.sub2{top : 191px}
dt.sub3{top : 233px}
.guide-sub{display : none}
#guide-top:hover .guide-sub{display : block}

Answer 1

I've already fixed it by putting a wrapper around it and aligning the submenu inside a centered wrapper.

<div id = "sub-wrapper">
    <dt class = "guide-sub sub1" id = "guide"><a href = "test1.html">Test 1</a></dt>
    <dt class = "guide-sub sub2" id = "guide"><a href = "test2.html">Test 2</a></dt>
    <dt class = "guide-sub sub3" id = "guide"><a href = "test3.html">Test 3</a></dt>
</div>

With CSS (first line added, second adjusted):

div#sub-wrapper{position : absolute; margin : auto; top : 149px; width : 606px; height : 128px;}
dt.guide-sub{width : 150px; height : 41px; margin-left : 303px; border : 1px solid black; background : rgba(20,20,20,0.4);}