Question

检查this link，由于一些空间限制，红色区域是固定的，而在里面我有一些引导下拉菜单（也有子菜单。）

我已将overflow:hidden;提供给#fixedwidtharea，这是必需的。（请不要建议删除这个属性，我不能。）

根据要求，红区将始终固定，菜单会动态生成，但主要问题是子菜单正在切割。是否有任何工作可以使子菜单可见。

HTML

<div id="fixedwidtharea">
<ul class="nav nav-pills biggerwidth">
    <li class="active"><a href="#">Regular link</a>
    </li>
    <li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown <b class="caret"></b></a>

        <ul class="dropdown-menu" id="menu1">
            <li> <a href="#">2-level Menu <i class="icon-arrow-right"></i></a>

                <ul class="dropdown-menu sub-menu">
                    <li><a href="#">Action</a>
                    </li>
                    <li><a href="#">Another action</a>
                    </li>
                    <li><a href="#">Something else here</a>
                    </li>
                    <li class="divider"></li>
                    <li class="nav-header">Nav header</li>
                    <li><a href="#">Separated link</a>
                    </li>
                    <li><a href="#">One more separated link</a>
                    </li>
                </ul>
            </li>
            <li><a href="#">Another action</a>
            </li>
            <li><a href="#">Something else here</a>
            </li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a>
            </li>
        </ul>
    </li>
    <li class="dropdown"> <a href="#">Menu</a>

    </li>
    <li class="dropdown"> <a href="#">Menu</a>

    </li>
</ul>

CSS

body {
    padding-top: 60px;
    padding-bottom: 40px;
}
#fixedwidtharea {
    background:red;
    width:250px;
    overflow:hidden;
}
#biggerwidth {
    width:800px !important;
}
.sidebar-nav {
    padding: 9px 0;
}
.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    margin-top: -1px;
}
.dropdown-menu li:hover .sub-menu {
    visibility: visible;
}
.dropdown:hover .dropdown-menu {
    display: block;
}
.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
    margin-top: 0;
}
.navbar .sub-menu:before {
    border-bottom: 7px solid transparent;
    border-left: none;
    border-right: 7px solid rgba(0, 0, 0, 0.2);
    border-top: 7px solid transparent;
    left: -7px;
    top: 10px;
}
.navbar .sub-menu:after {
    border-top: 6px solid transparent;
    border-left: none;
    border-right: 6px solid #fff;
    border-bottom: 6px solid transparent;
    left: 10px;
    top: 11px;
    left: -6px;
}

Answer 1

您可以使用CSS伪元素before和after，并在这些元素中使用overflow: hidden;来保留布局。像这样 -

#fixedwidtharea:before,
#fixedwidtharea:after{
    content: "";    
    display: block;    
    overflow: hidden; 
}

然后从overflow: hidden;

中删除#fixedwidtharea

<强> DEMO

编辑：如果您无法从overflow: hidden;移除#fixedwidtharea，则可以明确声明overflow可见。

#fixedwidtharea {
    overflow: visible !important;
}

Answer 2

你能修改CSS吗

#fixedwidtharea {overflow: visible;}

Answer 3

使用Clear-fix技巧而不是溢出（我想这应该适用于IE＆lt; 8）

将此类添加到固定宽度div：

<div id="fixedwidtharea" class="clearfix">...</div>

CSS：

.clearfix:before,
.clearfix:after {
    content: ".";    
    display: block;    
    height: 0;    
    overflow: hidden; 
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

并删除溢出：隐藏

http://jsfiddle.net/0kmpbj6c/

菜单在固定区域外不可见

3 个答案: