html - 如何使子菜单 float 在 div 上？

Question

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

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

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;

}

Answer 1

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

在你的 CSS 中改变它