Dropdown menu appears on right instead of underneath anchor

Question

If I'm floating an element left that I want to be the toggle of the dropdown, the dropdown appears on the left side. I'm trying to get it to go to the bottom.

This usually doesn't happen in the regular bootstrap so I'm a bit lost. Anyone have any suggestions?

Here is a Plunker example

<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

I can't explain why, but the float is the problem. Set the anchor inline-block instead.

Demo

(My personal policy is to try inline-block before floats in every case--floats tend to cause more problems than they solve.)