CSS下拉导航导致html内容移动

Question

我关于SO的第一个问题，希望能解决，对于一个精通CSS技术的人来说，应该是一个简单的解决方案...

问题是我的css驱动导航的下拉部分导致其下面的内容向右移动。我发现张贴了类似问题的问题，但是我尝试了所有提供的解决方案，但似乎没有任何解决办法。....

我设法获得的最接近的方法是将position:absolute;添加到#nav li:hover ul标记中，但这确实阻止了内容的移动，但是却产生了一个新问题，只有当鼠标悬停在[顶层菜单项，然后尝试将鼠标移到子菜单中，导致该菜单消失。...我同样感到沮丧的另一个问题是解决...

导航的html是标准的嵌套列表：

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

以及随附的css如下：

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

我试图通过常规路线（在Google，SO等上搜索）以及各种定位配置来寻找解决方案，但我似乎无法解决此问题...感谢您提前提供的帮助，这个问题使我整日生气！

Answer 1

更新

终于有机会重新审视这一点。您只需要将以下内容添加到#nav li ul：

position: absolute;
z-index: 100;

在IE8 / 9，FF和Chrome中都可以使用，尽管无论是否更改，子菜单的位置在IE7中都是关闭的。要解决此问题，我建议通过您喜欢的任何方法来使用IE7特定的CSS。

Answer 2

您可以尝试使用z-index做某事。 Z-index是“制作”图层，因此也许您可以将子导航设置为z-index：2。

但是，在制作下拉菜单的情况下，我建议使用jQuery。我曾经尝试使用纯CSS和HTML制作下拉菜单，但很快发现jQuery更好。

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