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

关于SO的第一个问题,希望它能够解决,对于精通css艺术的人来说应该是一个简单的解决方案……

我遇到的问题是我的css驱动导航的下拉部分导致其下方的内容向右移动.我发现了类似的问题,但我已经尝试了所有提供的解决方案,似乎没有任何工作……

我设法得到的最接近的是添加位置：绝对;到#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;}

我试图通过正常路线找到解决方案(搜索谷歌,SO等)以及玩各种定位配置,但我似乎无法解决这个问题…
感谢您提前提供任何帮助,这个问题一直让我发疯！

解决方法

更新

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

position: absolute;
z-index: 100;

适用于IE8 / 9,FF和Chrome,但在IE7中关闭子菜单的位置,无论是否有我的更改.为了解决这个问题,我推荐使用IE7特定的CSS.

原文地址：https://www.jb51.cc/css/217551.html