將下拉列表直接放在嵌入式元素下

Question

我想創建一個下拉菜單，所以我有一個水平導航

s表示菜單鏈接。 每個

，還有一個，包含應在懸停時彈出的列表。 根具有左右邊緣。 因此，下面的代碼在Chrome中可以完美運行，但在FF和OP中則不能。 這些瀏覽器不顯示直接在父級下方

，但位於父級的開頭（忽略邊距值）

因此，我認為最好的方法是簡單地向您顯示代碼：

 <div id="top_navi"> <ul> <li> <a href="#" title="Kategorien">Kategorien</a> <ul id="dropdown_categories" class="dropdown-menu"> <li > <a href="http://web28.vsrv10.wwggmbh.de/produkttipps" title="Produkttipps" >Produkttipps</a> </li> <li > <a href="http://web28.vsrv10.wwggmbh.de/testkategorie-1" title="Testkategorie 1" >Testkategorie 1</a> </li> </ul> </li> <li> <a href="#" title="Hersteller">Hersteller</a> <ul id="dropdown_categories" class="dropdown-menu"> <li > <a href="http://web28.vsrv10.wwggmbh.de/produkttipps" title="Produkttipps" >Produkttipps</a> </li> <li > <a href="http://web28.vsrv10.wwggmbh.de/testkategorie-1" title="Testkategorie 1" >Testkategorie 1</a> </li> </ul> </li> </ul> </div> 

這是JS代碼：

 $(document).ready(function() { $('#top_navi ul li').hover(function() { $(this).find('.dropdown-menu').css('display', 'inline-block'); $(this).find('.dropdown-menu').show(); }, function() { $(this).find('ul').hide(); }); }); 

和CSS代碼：

 #top_navi { height: 25px; background-color: #8E8777; } #top_navi ul { text-align: center; padding-top: 7px; height: 18px; } #top_navi li { position: relative; display: inline; text-transform: uppercase; font-size: 1.3em; font-weight: 100; padding: 3px 7px 1px 7px; color: #dfdbd5; text-decoration: none; } #top_navi li a { color: inherit; text-decoration: none; } #top_navi li:hover { background-color: #dfdbd5; color: #8E8777; } /* Dropdown menu */ .dropdown-menu { width: auto; height: 100%; position: absolute; top: 22px; z-index: 10; background-color: #dfdbd5; display: none; padding-top: 0 !important; margin-top: 2px !important; } .dropdown-menu li { display: block !important; min-width: 150px; font-size: 0.8em !important; text-transform: none !important; color: #8E8777 !important; text-align: left !important; padding: 5px 0; background-color: #dfdbd5; border-left: 1px solid #000; border-right: 1px solid #000; } .dropdown-menu li:last-child { border-bottom: 1px solid #000; } .dropdown-menu li:hover { background-color: #8E8777 !important; color: #dfdbd5 !important; } 

我還制作了一個屏幕截圖以更好地理解：

Answer 1

我不知道如何解決該問題，但是以防萬一您根本不了解，我為您的標記開發了一個小“模擬”，它僅依賴於div：

HTML：

<div class="navi">
        <div class="naviNodeContainer"> 
            <div class="firstNode">Categories
                <div class="subNode">Subcategory 1</div>
                <div class="subNode">Subcategory 2</div>
            </div>
            <div class="secondNode">Suppliers
                <div class="subNode">Subcategory 1</div>
                <div class="subNode">Subcategory 2</div>
            </div>

        </div>        
    </div>

CSS：

<style type="text/css">

.navi
{
    position:absolute;
    background-color:Blue;
    height:50px;
    width:100%;
}

.naviNodeContainer
{
    position:relative;
    background-color:Yellow;
    height:100%;
    width:30%;
    left:35%;
}

.firstNode
{
    background-color:Red;
    height:100%;
    width:50%;
    float:left;
}

.secondNode
{
    background-color:Green;
    height:100%;
    width:50%;
    float:left;
}

.subNode
{
    position:relative;
    background-color:Silver;
    height:25px;
    width:90%;
    top:10%;
    left:10%;
    display:none;
}

</style>

jQuery：（對不起，這只是一個小錯誤，僅用於演示）

<script type="text/javascript">
    $(document).ready(function() {
        $('.firstNode').hover(function() {
            $(".subNode").show();
        });

        $('.firstNode').mouseout(function() {
            $(".subNode").hide();
        });

    });

</script>  

Answer 2

您需要將下拉列表父li設置為position：relative; 您可能還沒有將其設置為左：0;

希望有幫助:)