Question

大家好，我有一个带有下拉菜单的子菜单，但是当菜单关闭时它将下面的div推下去。有关如何解决的任何想法，所以它加载div？

并且一个是水平的，一个是垂直的如何修复它谢谢！

    <ul class="proda">
    <li><a href="#" data-filter="*" class="current">All Categories</a></li>

    <li><a>Styles</a><b class="caret2"></b>
            <ul>
        <li><a href="#" data-filter=".slim">Slim</a></li>
        <li><a href="#" data-filter=".loose">loose</a></li>
        <li><a href="#" data-filter=".pro">proffesional</a></li>       
            </ul>               
    </li>

    <li><a>Brands</a><b class="caret2"></b>
      <ul>
        <li><a href="#" data-filter=".ses" class="current">LA Sesso</li>
        <li><a href="#" data-filter=".isa" class="current">Issah</li>
        <li><a href="#" data-filter=".ant" class="current">Antonio</li>
      </ul>           
    </li>
    <li><a href="#" data-filter=".seas">Seasonal</a></li>
    <li><a href="#" data-filter=".bnew">New</a></li>
</ul>
.proda{
    display: table-row;
    list-style: none;
}


.proda li ul { 
    background: #ccc;
    display: none; 
}

.proda li{
    display: table-cell;
    padding: 15px;
} 

.proda li a:hover{
    color: blue;
}

.proda li:hover ul { 
    position: relative;
    display: block; 
    z-index: 1;
 }

    display: block;
    background-color: #ecf0f1;

}

Answer 1

.proda li:hover ul { 
    position: absolute; //Changed
    display: block; 
    z-index: 1;
 }

在你的css中更改此内容

Answer 2

你的CSS都错了。定义下拉类：

.dropdown{
 position: absolute;
display: none;
z-index: 99;
width: 150px;
}

然后给你的那一行：

    <li class="dropdown"><a>Brands</a><b ></b>
  <ul>
    <li><a href="#" data-filter=".ses" class="current">LA Sesso</li>
    <li><a href="#" data-filter=".isa" class="current">Issah</li>
    <li><a href="#" data-filter=".ant" class="current">Antonio</li>
  </ul>           
</li>

适当地重新排列导航。另外，请使用nav标记。

Answer 3

试试这段代码

.proda li:hover ul {
    display: block;
    position: absolute;
    z-index: 1;
}

Answer 4

Yoo必须将子菜单的position更改为absolute。 DEMO

Answer 5

对子菜单使用绝对位置

 proda li:hover ul {
 position: absolute;}

和菜单li的位置相对

proda li{ position: relative;}

http://jsfiddle.net/akash4pj/pc4xC/5/

Answer 6

JSFIDDLE

从position:relative移除.proda li:hover ul，而不是position:absolute。

所以你的css代码如下：

    .proda li:hover ul { 
        position: absolute;
        display: block; 
        z-index: 1;
     }

Answer 7

从选择器position: relative;更改删除属性.proda li:hover ul以获取

        .proda li:hover ul {
            display: block;
            z-index: 1;
        }

然后添加其他选择器

        .proda>li>ul{
            position: absolute;
        }

如何使子菜单浮动div？

7 个答案: