将下拉列表直接放在内联元素下

Question

我想做一个下拉菜单，所以我有一个水平导航

用于菜单链接。在每个

，还有另一个，包含悬停时应弹出的列表。根有一个左边距和右边距。因此，下面的代码在 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;你没有设置 left: 0;

希望有帮助:)