html - 如何在 Kickstarter 上创建下拉菜单

Question

我正在尝试创建类似于 kickstarter 的下拉菜单。这里有 2 张图片:

但这是我得到的:

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

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

这是 CSS 代码，后面是我的 HTML 代码:

.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

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

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

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