正确定位子菜单 (HTML/CSS)答案

【问题标题】：Getting sub-menu positioned correctly (HTML/CSS)正确定位子菜单 (HTML/CSS)
【发布时间】：2015-07-30 17:55:47
【问题描述】：

如何让指南的子菜单在下方对齐？调整窗口大小或使主菜单居中使其看起来不正常。

这是代码的一部分：

        <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>

这是这个位的 CSS：

#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}

【问题讨论】：

为什么不用ul 和li 这样的菜单.. 很简单..

标签： html css alignment submenu

【解决方案1】：

我已经通过在它周围放置一个包装器并将子菜单对齐在一个居中的包装器内来修复它。

<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>

使用 CSS（添加第一行，调整第二行）：

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);}

【讨论】：