html - 打开下拉菜单后，如何移动网站上的所有内容？

Question

我希望所有内容 div 在打开下拉菜单后向下移动，然后在关闭后向上移动。这是我的代码:

HTML:

<i><div class="Navigation" style="position:relative;left:170px;max-width:100%;border:none;padding:0;margin:0 auto;display:block;">

    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar openclosemenu" data-toggle="collapse" data-target=".nav-collapse">         
                    <div class="menu-icon">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </div>
                    <div class="menu-icon menu-text">
                        Menu
                    </div>
                </a>
                <div class="nav-collapse collapse">

                    <div id="smoothmenu1" class="ddsmoothmenu Navigation">
                        <ul class="nav">
                            <li id="page-id-1" class="#">
                                <a title="Home" href="index.html">Naslovna</a>
                            </li>
                            <li id="page-id-2" class="about-us">
                                <a title="#" href="#">O Nama</a>
                                <ul>
                                    <li id="page-id-290" class="#"><a title="#" href="#">Test 1</a></li>
                                    <li id="page-id-169" class="#"><a title="#" href="#">Test 2</a></li>
                                    <li id="page-id-18" class="#"><a title="#" href="#">Test 3</a></li>
                                    <li id="page-id-155" class="#"><a title="#" href="#">Test 3</a></li>
                                    <li id="page-id-1558" class="#"><a title="#" href="#">Test 3</a></li>
                                    <li id="page-id-18888" class="#"><a title="#" href="#">Test 3</a></li>
                                    <li id="page-id-185458" class="#"><a title="#" href="#">Test 3</a></li>
                                </ul>
                            </li>
                            <li id="page-id-3" class="maternity">
                                <a title="#" href="#">Materinstvo</a>
                                <ul>            
                                </ul>
                            </li>
                            <li id="page-id-4" class="children">
                                <a title="#" href="#">Dijeca</a>
                                <ul>                
                                </ul>
                            </li>
                            <li id="page-id-5" class="womens-health">
                                <a title="#" href="#">Zdravlje Žene</a>
                                <ul>            
                                </ul>
                            </li>
                            <li id="page-id-6" class="medical-professionals">
                                <a title="#" href="#">Bezbjednost</a>
                                <ul>        
                                </ul>
                            </li>
                            <li id="page-id-7" class="careers">
                                <a title="#" href="#">Naši Doktori</a>
                                <ul>
                                </ul>
                            </li>
                        </ul>
                        <img src="prop.png" width="850" height="1" style="position:relative;left:-100px;">
                    </div>

                </div>

            </div>
        </div>
    </div>

</div></i>

我的这个元素的 CSS 是:

<i>.ddsmoothmenu
{
    margin: 0 auto;
    float: none
}

.ddsmoothmenu ul
{
    position: relative;
    z-index: 10000000000000000;
    margin: 0 auto;
    padding: 0
}

.ddsmoothmenu ul li
{
    position: relative;
    display: inline;
    float: left
}

.ddsmoothmenu ul li a { display: block; float: left }

.ddsmoothmenu ul li a { display: inline-block}

.ddsmoothmenu ul li ul
{
    position: absolute;
    left: 0;
    display: none;
    visibility: hidden
}

.ddsmoothmenu ul li ul li
{
    display: list-item;
    float: left;
    clear: both
}

.ddsmoothmenu ul li ul li ul { top: 0 }

.ddsmoothmenu ul li ul li a
{
    width: 260px!important;
    line-height: 16px!important;
    padding: 8px!important;
    margin: 0;
    border-top-width: 0;
    font-size: 180%;
    font-family: "MyriadPro-Regular", MyriadPro-Regular;
    text-shadow: none;
    color: #999999!important;
    text-align: left!important
}

.ddsmoothmenu ul li ul li ul li a
{
    width: 260px!important;
    line-height: 16px!important;
    padding: 8px!important;
    margin: 0;
    border-top-width: 0;
    font-size: 100%;
    font-family: "MyriadPro-Regular", MyriadPro-Regular;
    text-shadow: none;
    color: #999999!important;
    text-align: left!important
} 

.ddsmoothmenu {height: 1%}

Answer 1

position: absolute; here:

.ddsmoothmenu ul li ul {
  position: absolute;
  left: 0;

将使这些元素位于其他元素之上。 删除 position，它应该会强制其下方的元素在页面上向下移动。

如果这不起作用，那么请尝试在 jsFiddle 或 jsBin 上重现它，这样我们就可以试用它并查看完整的工作代码。