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

我还制作了一个截图，以便更好地理解：

Screenshot

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;

希望有所帮助：）

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

2 个答案: