下拉菜单显示在右侧而不是锚点下方

Question

如果我正在浮动一个元素,我希望成为下拉列表的切换,则下拉列表显示在左侧.我试图让它走到最底层.

这通常不会发生在常规引导程序中,所以我有点迷失.有人有什么建议吗？

这是一个Plunker示例

<div id="top-header" class="slide" ng-controller="DropdownCtrl">
    <div id="cornerBox"></div>
    <span class="dropdown" dropdown on-toggle="toggled(open)">
        <a id="logo" class="clearfix dropdown-toggle" dropdown-toggle><span>{{ "header" }}</span></a>

        <ul class="dropdown-menu">
            <li ng-repeat="choice in items">
                <a href>{{choice}}</a>
            </li>
        </ul>
    </span>

    <div id="searchBar">
        <div>&nbsp;</div>
    </div>

</div>

CSS

#cornerBox { float:left;width:50px;height:50px;background-color:#3CC274; }

#top-header {
    position:absolute;
    height: 56px;
    width:100%;
    max-height: 50px;
    background-color:#24BD66;
    color:#fff;
    z-index:3;
    box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.23);
}

#logo
{
    font-weight:400;
    color:#000;
    display:block;
    position:relative;
    text-decoration:none;
    float:left;
    width:100px;
    margin:3px 0 0 15px;
    height:30px;
    font-size:30px;
    cursor:pointer;
}

#searchBar { position:relative;width:68%;margin:0 auto;left:100px;border-radius:3px;height:35px;margin-top:7px;background-color:#5ECD8C;}
#searchBar div { float:left;width:50px;height:35px;text-align:center;line-height:35px;font-size:15px; }

Answer 1

我无法解释为什么，但浮动是问题所在。设置锚点inline-block。

演示

（我个人的策略是在每种情况下都在浮动之前尝试内联块 - 浮动往往会导致比它们解决的问题更多的问题。）