html - 菜单隐藏在 div 中

Question

我正在尝试在 <i class="fa fa-chevron-down"></i> 上显示菜单点击。我正在使用 Bootstrap 3。问题是菜单隐藏在div里面.我想在 div 上方显示菜单.我的代码在这里:http://jsfiddle.net/xrcwrn/o9txgsbz/

代码:

<div class="thumbnail">
    <div class="media">
        <a class="pull-left" href="#">
        <img class="media-object" src="" alt="Image" />
        </a>
        <div class="pull-right" style="color: #c1c1c1">
            <ul>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <i class="fa fa-chevron-down"></i>
                    </a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="topstory">delete</a></li>
                        <li><a href="findfriends">Find Friends</a> </li>
                        <li><a href="settings">Settings</a></li>
                        <li><a href="logout">Logout</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="media-body">
            <div class="media-heading">
                <strong>
                    <a href=profile?id=23">ABCD EFgh</a>
                </strong>
            </div>
            <div class="media-heading" style="font-size: 9px">12/13/14</div>
        </div>
        <div> 
            Hello sdf asdf asdf asdf asdf asdf asdf  
        </div>
    </div>
</div>

Answer 1

您需要更改一些规则:

.dropdown-menu {
    top: initial;
    left: initial;
    right: 0;
}

.dropdown {
    position: static;
}

在这里查看:http://jsfiddle.net/o9txgsbz/2/