Question

我已经用元素构建了标题。我希望我的下拉元素（出现在click（jquery）上）位于其父元素的下方，并占用所需的空间，但仅此而已。

我尝试不使它们成为绝对对象，这没有帮助，因为标题在下拉菜单出现时扩展了。

这是我的html：

<!DOCTYPE html>
<html>

    <head>

        <link href="header.css" rel="stylesheet">   
        <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

        <title>header</title>

    </head>

    <body>

        <div id="header">

            <div id="header_menu">

                <div class="header_menu_wrapper">

                    <div class="header_menu_flexelement">PLÄNE</div>

                    <div id="header_menu_dropdown_wrapper">

                        <div class="header_menu_dropdown">UnterPLÄNE</div>

                        <div class="header_menu_dropdown">UnterPLÄNE</div>

                        <div class="header_menu_dropdown">UnterPLÄNE</div>

                        <div class="header_menu_dropdown">UnterPLÄNE</div>

                        <div class="header_menu_dropdown">UnterPLÄNE</div>

                    </div>

                </div>          

                <div class="header_menu_wrapper">

                    <div class="header_menu_flexelement">PROFIL</div>

                    <div id="header_menu_dropdown_wrapper">

                        <div class="header_menu_dropdown">UnterPROFIL</div>

                        <div class="header_menu_dropdown">UnterPROFIL</div>

                        <div class="header_menu_dropdown">UnterPROFIL</div>

                    </div>

                </div>            

                <div class="header_menu_wrapper"><div class="header_menu_flexelement"><a href="../index.html">HOME</a></div></div>

                <div class="header_menu_wrapper">

                    <div class="header_menu_flexelement">TERMINE</div>

                    <div id="header_menu_dropdown_wrapper">

                        <div class="header_menu_dropdown">UnterTERMINE</div>

                        <div class="header_menu_dropdown">UnterTERMINE</div>

                        <div class="header_menu_dropdown">UnterTERMINE</div>

                    </div>

                </div>   

                <div class="header_menu_wrapper">

                    <div class="header_menu_flexelement">KONTAKT</div>

                    <div id="header_menu_dropdown_wrapper">

                        <div class="header_menu_dropdown">UnterKONTAKT</div>

                        <div class="header_menu_dropdown">UnterKONTAKT</div>

                        <div class="header_menu_dropdown">UnterKONTAKT</div>

                    </div>

                </div>    

            </div>

        </div>

        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>

            $('.header_menu_flexelement').on('click',function() {

                $(this).next('div').slideToggle(300);

            });

        </script>

    </body>

</html>

    this is my css:

body {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
}

#header {
    position: relative;
    background: #fff;
    width: 100%;
    min-height: 10vh;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-bottom: solid 5px #F27405;
    z-index: +3;
}
#header_menu {
    display: inline-flex;
}
.header_menu_wrapper {

    position: relative;
    justify-content: space-around;
}
#header_menu_dropdown_wrapper {
    position: absolute;
    padding: 10px;
    background: #ddd;
    border-left: 2px solid #F27405;
    display: none; 
}
.header_menu_dropdown {
    margin: 10px auto;
    color: #F27405;
    font-size: 20pt;
}
.header_menu_flexelement {
    position: relative;
    padding: 5px 20px;
    color: #F27405;
    font-size: 20pt;
    transition: all 500ms;
    user-select: none;
    text-align: center;
}
.header_menu_flexelement a {
    color: #F27405;
    font-size: 20pt;
    text-decoration: none;
}
.header_menu_flexelement:hover {
    cursor: pointer;
}
#header_logo {
    position: absolute;
    left: 0;
    height: 100%;
}
#header_search_icon {
    position: absolute;
    right: 0;
    height: 100%;
    margin-right: 20px;
    user-select: none;
}
a {
    text-decoration: none;
}

Answer 1

您快到了。唯一缺少的是将request_sock和left属性添加到绝对定位的元素中。我添加了以下提到的代码：

请点击“运行代码段”，检查下面给出的工作演示。

right

#header_menu_dropdown_wrapper {
    left: 0;
    right: 0; /* Left and Right 0 makes sure that the dropdown item stays at the left and right most edge of the relative parent. */
    overflow: hidden; /* This makes sure that the content does not overflow */
    word-wrap: break-word; /* This makes sure that the words are not hidden and rather break down to new line */
}

$('.header_menu_flexelement').on('click',function() {

                $(this).next('div').slideToggle(300);

            });

body {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
}

#header {
    position: relative;
    background: #fff;
    width: 100%;
    min-height: 10vh;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-bottom: solid 5px #F27405;
    z-index: +3;
}
#header_menu {
    display: inline-flex;
}
.header_menu_wrapper {

    position: relative;
    justify-content: space-around;
}
#header_menu_dropdown_wrapper {
    position: absolute;
    padding: 10px;
    background: #ddd;
    border-left: 2px solid #F27405;
    display: none; 
    left: 0;
    right: 0;
    overflow: hidden;
    word-wrap: break-word;
}
.header_menu_dropdown {
    margin: 10px auto;
    color: #F27405;
    font-size: 20pt;
}
.header_menu_flexelement {
    position: relative;
    padding: 5px 20px;
    color: #F27405;
    font-size: 20pt;
    transition: all 500ms;
    user-select: none;
    text-align: center;
}
.header_menu_flexelement a {
    color: #F27405;
    font-size: 20pt;
    text-decoration: none;
}
.header_menu_flexelement:hover {
    cursor: pointer;
}
#header_logo {
    position: absolute;
    left: 0;
    height: 100%;
}
#header_search_icon {
    position: absolute;
    right: 0;
    height: 100%;
    margin-right: 20px;
    user-select: none;
}
a {
    text-decoration: none;
}

使绝对下拉列表元素居中

1 个答案: