CSS下拉导航使html内容移动 [英] CSS dropdown nav causing html content to move

问题描述

我的第一个问题，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驱动导航的下拉部分导致它下面的内容向右移动。我发现了类似的ish问题，但我已经尝试所有提供的解决方案，没有什么似乎得到它的工作.....

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

我最近设法得到的是在 #nav li：hover ul 标签中添加 position：absolute; ，这样会阻止内容移动但是创建了一个新问题，下拉子菜单只有当鼠标在顶层菜单项上时才可见，并且试图将鼠标移动到子菜单导致它消失...另一个问题，我找到同样的令人沮丧的解决...

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>

如下：

#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等搜索），以及玩各种定位配置，但我只是似乎无法解决这个问题。 ..
感谢任何帮助，这个问题一直驱使我疯了一整天！

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内容移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！