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

问题描述

我关于 SO 的第一个问题，希望它是从头开始的，对于精通 css 艺术的人来说应该是一个简单的解决方案......

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

我遇到的问题是我的 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.....

我设法得到的最接近的方法是将 position:absolute; 添加到 #nav li:hover ul 标记，这确实阻止了内容四处移动，但产生了一个新问题，下拉子菜单仅在鼠标位于顶级菜单项上时可见，并且尝试将鼠标向下移动子菜单会导致它消失......我发现的另一个问题同样令人沮丧解决...

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

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

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>

以及附带的css如下:

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

我试图通过正常途径(在 google、SO 等上搜索)以及尝试各种定位配置来寻找解决方案，但我似乎无法解决这个问题......感谢您提前提供的任何帮助，这个问题整天让我发疯！

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!

推荐答案

更新

终于有机会重新审视这个了.您只需将以下内容添加到 #nav li ul:

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;

在 IE8/9、FF 和 Chrome 中工作，尽管子菜单的位置在 IE7 中是关闭的，无论我是否更改.为了解决这个问题，我推荐通过您喜欢的任何方法使用 IE7 特定的 CSS.

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.

这篇关于CSS下拉导航导致html内容移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！