CSS dropdown nav causing html content to move

Question

my first question on SO, hope it's up to scratch, should be a simple solve for somebody well versed in the art of css...

The problem im having is that the dropdown sections of my css-driven navigation are causing the content below it to shift to the right. I have found similar-ish questions posted but I have tried all provided solutions and nothing seems to get it working.....

The closest I have managed to get is to add position:absolute; to the #nav li:hover ul tag, and this does stop the content from moving around, but creates a new problem, the dropdown submenu is only visible when the mouse is over the top level menu item, and trying to move the mouse down the submenu causes it to disappear... another problem that I am finding equally as frustrating to solve...

the html for the navigation is standard nested lists:

<div id="navigation_panel" class="orange_grad">
    <!-- navigation-->
      <ul id="nav">
            <li><a href="#">about us</a>
                    <ul>
                            <li class="orange_grad"><a href="1">staff</a></li>
                            <li class="orange_grad"><a href="2">venue</a></li>
                            <li class="orange_grad"><a href="2">history</a></li>
                            <li class="orange_grad"><a href="2">community theatre</a></li>
                            <li class="orange_grad"><a href="2">rep theatre</a></li>
                            <li class="orange_grad"><a href="2">theatre school</a></li>
                            <li class="orange_grad"><a href="2">official partners</a></li>
                    </ul>
            </li>
            <li><a href="#">join us</a>
                    <ul>
                            <li class="orange_grad"><a href="1">friends membership</a></li>
                            <li class="orange_grad"><a href="2">wine club</a></li>
                    </ul>
            </li>
            <li><a href="#">hire</a>
                    <ul>
                            <li class="orange_grad"><a href="1">business</a></li>
                            <li class="orange_grad"><a href="2">rehersal space</a></li>
                            <li class="orange_grad"><a href="2">community groups</a></li>
                            <li class="orange_grad"><a href="2">theatre productions</a></li>
                            <li class="orange_grad"><a href="2">memorable occasions</a></li>
                    </ul>
            </li>
            <li><a href="#">contact</a>
                    <ul>
                            <li class="orange_grad"><a href="1">list of contacts</a></li>
                            <li class="orange_grad"><a href="2">contact us now</a></li>
                    </ul>
            </li>
            <li class=" last"><a href="#">support</a>
                    <ul>
                            <li class="orange_grad last"><a href="1">donations + requests</a></li>
                            <li class="orange_grad last"><a href="2">past sponsors</a></li>
                            <li class="orange_grad last"><a href="2">thanks</a></li>
                            <li class="orange_grad last"><a href="2">volunteers</a></li>
                            <li class="orange_grad last"><a href="2">set up a community event</a></li>
                    </ul>
            </li>
    </ul>

and the accompanying css is as follows:

#navigation_panel {border-radius: 18px 18px 0 0/ 18px 18px 0 0; width: 900px; height:50px;}

#nav { margin:0; padding: 0; list-style:none;}
#nav a{ color:black; font-size: 20px; text-decoration:none; min-height:50px; width:95px;}
#nav li {text-align:center; float:left; padding:14px 8px ; cursor:pointer; width:95px;}
#nav li.last{width:99px;}

#nav li ul {margin-top:14px; margin-left:-8px; padding:0; display: none; list-style:none;}
#nav li ul li{ border:1px solid black; width:95px; padding:6px 8px;}
#nav li ul li a{/*font-family:arial;*/ font-size:14px;}

#nav li:hover{ text-decoration:underline; }
#nav li:hover ul{display: block;}
#nav li:hover ul li {clear: left;}

I have tried to find solutions through the normal route (search on google, SO etc) aswell as playing around with various positioning configurations but I just can't seem to solve this... Thanks for any help in advance, this problem has been driving me mad all day!

Answer 1

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.

Answer 2

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