Question

如何获取指南下方对齐的子菜单？调整窗口大小或使主菜单居中使其看起来很清晰。

这是代码的一部分：

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

Answer 1

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

Form::submit('Contact Me',['class'=>'btn btn-primary form-control'])

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

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

正确定位子菜单（HTML / CSS）

1 个答案: