如何使子菜单浮动在div上？ [英] How to make sub menu float over div?

问题描述

大家好，我有一个带有下拉菜单的子菜单，但是当菜单下拉时，它将下面的div向下推。关于如何修复以便可以在div上加载的任何想法吗？

Hello all I have a sub menu that with a drop down menu but when the menu comes down it pushes the div below down. Any idea on how to fix so it loads over div?

还有一个是水平的，另一个是垂直的如何解决这个问题
谢谢！

and also one is horizontal and one is vertical how to fix that aswell thanks!

JSFiddle

    <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;

}

推荐答案

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

在您的CSS中更改此值

change this in your css

这篇关于如何使子菜单浮动在div上？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！