Question

<div id="header">
<a href="#" id="logo"></a>

</div>
<div id="nav_cont">
<ul id="nav">
    <li id="main_btn"><a class="mainlink" href="#">Parent 01</a></li>
    <li id="communities_btn"><a class="mainlink" href="#" class="selected">Parent 02</a>
        <ul>
            <li><a href="#">Item 01</a></li>
            <li><a href="#" class="selected">Item 02</a></li>
            <li><a href="#">Item 03</a></li>
        </ul>
        <div class="clear"></div>
    </li>
    <li id="occupancy_btn"><a class="mainlink" href="#">Parent 03</a>
    <ul>
        <li><a href="#">Item 04</a></li>
        <li><a href="#">Item 05</a></li>
        <li><a href="#">Item 06</a></li>
        <li><a href="#">Item 07</a></li>
    </ul>         
        <div class="clear"></div>
    </li>
    <li id="resources_btn"><a class="mainlink" href="#">Parent 04</a></li>
    <li id="about_btn"><a class="mainlink" href="#">Parent 04</a></li>
    <li id="newsletter_btn"><a class="mainlink" href="#">Parent 04</a></li>
    <li id="contact_btn"><a class="mainlink" href="#">Parent 04</a></li>

</ul>

<div class="clear"></div>
</div>
<div id="content">



</div>

#header{
border: 0px solid;
width:1024px;
margin: 0 auto;

}
#content{
border: 1px solid;
width:1024px;
height:400px;
margin: 0 auto;

}

#nav_cont{
position: absolute;
top:20px;
border:1px solid;
width:1024px;
left:50%;
margin-left:-512px;
}

我会尽力解释。我有一个标题div标签，用于存放徽标。接下来，我有一个nav_cont，它是一个带有隐藏下拉菜单的菜单。最后，其余内容位于内容div标签中。

我已经对齐菜单，向用户显示它是水平的，并且在内部使用绝对值居中，因此在下拉列表出现时不会按下内容。

然而，当我缩小浏览器时，即使标题和内容已停止，nav_cont也会继续离开屏幕。如果我使用亲戚或只是保证金：0 auto;它可以最大限度地减少罚款，但我的问题是，当显示下拉列表时，它会将内容推下来。

我希望我有意义。感谢。

Answer 1

尝试设置位置：绝对值为内部下拉菜单，因此当您显示它们时不会将内容向下推送

无法在不按下div内容的情况下调整下拉菜单

1 个答案: