Question

I want to make a dropdown menu, so I have a horizontal navigation with

s for the menu links. In each

, there is another , containing the list that should pop up on hover. The root has a left and right margin. So the code beneath works perfect in Chrome, but not in FF and OP. These browsers do not display the directly under the parent

, but at the beginning of the parent (ignoring the margin value)

So, I think the best way is to simply show you the code:

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

This is the JS Code:

$(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();
    });
});

and the css code:

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

I also made a screenshot for better understanding:

Answer 1

I have no idea how to solve the problem, but just in case you don´t get along at all, I developed a small “simulation” of your markup that only relies on divs:

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: (sorry, it´s a little wrong, just for demonstration)

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

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

    });

</script>