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/

Answer 2

菜单已隐藏，因为在media类元素中有overflow:hidden所以当菜单出现时，溢出部分会被隐藏。
您可以将overflow: visible提供给媒体元素以使菜单可见看到这个 http://jsfiddle.net/o9txgsbz/1/

菜单隐藏在div中

2 个答案: