如何创建一个下拉菜单作为Kickstarter

Question

我正在尝试创建类似于kickstarter的下拉列表。这是2张图片：

但这是我得到的：

似乎当我点击“Mon compte”并显示下拉菜单时，按钮“Mon compte”的宽度会自动更改为与下拉菜单相同的宽度。

我试图保持前后按钮“Mon compte”的宽度相同。我一直在寻找很长一段时间，但我没有找到解决方案。

以下是我的HTML代码后面的CSS代码：

.head_myadds{
color: rgba(180,180,180,1);
font-size: 1em;
font-weight: bold;

}

.head_account{
color: rgba(180,180,180,1);
font-size: 1em;
font-weight: bold;
}

.head_sign2{
position: relative;
top: -24px;
left: 15%;
padding-left: 10px;
border-left: 1px solid rgba(158, 158, 158, 0.3);
height: 66px;
}

.head_sign3{
position: relative;
top: -24px;
left: 15%;
padding-right: 0px;

}

.icon_myaccount{
position: relative;
left: 5px;
bottom: 2px;
}

.button_account{
margin: 0px;
min-width: 0px;
padding: 3px 5px 3px 0;
}


.dropdown_account{
position:relative;
bottom: 0px;
width: 350px;
margin: 0px;
min-width: 0px;


}

    <div class="header-dropdown-buttons hidden-xs ">
    <ul class="nav navbar-nav">
        <li class="head_sign2"><a href="#"><span class="head_myadds">Mes annonces</span></a></li>
        <li class="head_sign3"><a class="btn dropdown-toggle button_account" data-toggle="dropdown" href="#"><span class="head_account">Mon compte   <i class="fa fa-sort-desc pr-10 icon_myaccount"></i></span></a>
            <ul class="dropdown-menu dropdown-menu-right dropdown_account">
                <li><a href="#">Choice1</a></li>
                <li><a href="#">Choice2</a></li>
                <li><a href="#">Choice3</a></li>
                <li class="divider"></li>
                <li><a href="#">Choice..</a></li>
            </ul>

        </li>
    </ul>

    <!-- header dropdown buttons end-->

</div>

注意：我正在使用bootstrap 3。

Answer 1

您的某些自定义样式会导致下拉菜单更改导航栏列表项的显示方式。具体来说，如果您选择不在bottom类中设置position和.dropdown_account样式，则元素将按预期显示。

.dropdown_account{
    width: 350px;
    margin: 0px;
    min-width: 0px;

如果必须设置position样式，请将其设置为position: absolute，这是Bootstrap .dropdown-menu类尝试将其设置为的内容。祝你好运！