CSS dropdown nav causing html content to move

Updated

Finally got a chance to take a fresh look at this. All you need is to add the following to #nav li ul:

position: absolute;
z-index: 100;

Works in IE8/9, FF and Chrome, though the positioning of the sub menu is off in IE7, with or without my change. To fix that I recommend IE7 specific CSS through whatever method you prefer.

You can try to do something with z-index. Z-index is "making" layers, so maybe you can set your sub-navigation to z-index: 2.

But, in such situations as making dropdown menu i recommend using jQuery. I once tried to make dropdown menu with pure CSS and HTML, but soon found out that jQuery is way, better.

Example of a dropdown menu using jQuery: jsfiddle

jQuery:

$(".subnav").hide();
$(".navigation li a, .subnav").hover(function(){
    $(this).parent().find(".subnav").stop().fadeIn(400);
}, function(){
    $(this).parent().find(".subnav").stop().fadeOut(400);
});​

HTML:

<div>
    <ul class="navigation">
        <li><a>Example 01</a></li>
        <li><a>Example 02</a>
            <ul class="subnav">
                <li><a>Lorem</a></li>
                <li><a>Impsum</a></li>
                <li><a>Dolor</a></li>
                <li><a>Sit</a></li>
                <li><a>Amet</a></li>
            </ul>    
        </li>
        <li><a>Example 03</a></li>
        <li><a>Example 04</a></li>
    </ul>                                        
</div>​

CSS:

.navigation li{
    display: inline;
    font-family: Arial, sans-serif;
    font-size: 12px;
    padding: 0 10px;
    position: relative;
}
.navigation li a:hover{
    color: #999;
}
.subnav li{
    display: list-item;
    padding: 5px 10px;
}
.subnav{
    border: 1px solid #000;
    width: 70px;
    position: absolute;
    z-index: 2;
    margin-left: 10px;
}
​