CSS 下拉导航导致 html 内容移动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13212361/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS dropdown nav causing html content to move
提问by mr_lewjam
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...
我关于 SO 的第一个问题，希望它能够从头开始，对于精通 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.....
我遇到的问题是我的 css 驱动导航的下拉部分导致其下方的内容向右移动。我发现发布了类似的问题，但我已经尝试了所有提供的解决方案，但似乎没有任何效果.....
The closest I have managed to get is to add position:absolute;to the #nav li:hover ultag, 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...
我设法获得的最接近的是添加position:absolute;到#nav li:hover ul标签，这确实阻止了内容移动，但会产生一个新问题，下拉子菜单仅在鼠标悬停在顶级菜单项上时才可见，并试图将鼠标向下移动到子菜单会导致它消失......我发现另一个同样令人沮丧的问题要解决......
the html for the navigation is standard nested lists:
导航的 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>
and the accompanying css is as follows:
附带的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;}
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!
我试图通过正常路线（在 google、SO 等上搜索）以及各种定位配置来寻找解决方案，但我似乎无法解决这个问题......提前感谢您的任何帮助，这个问题已经一整天都让我发疯！
回答by Mathachew
Updated
更新
Finally got a chance to take a fresh look at this. All you need is to add the following to #nav li ul:
终于有机会重新审视这个问题了。您只需要将以下内容添加到#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.
适用于 IE8/9、FF 和 Chrome，尽管子菜单的位置在 IE7 中是关闭的，无论是否有我的更改。为了解决这个问题，我建议通过您喜欢的任何方法使用 IE7 特定的 CSS。
回答by Doozerman
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.
您可以尝试使用z-index做一些事情。Z-index 正在“制作”图层，所以也许您可以将子导航设置为 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.
但是，在制作下拉菜单的情况下，我建议使用 jQuery。我曾经尝试用纯 CSS 和 HTML 制作下拉菜单，但很快发现 jQuery 更好。
Example of a dropdown menu using jQuery: jsfiddle
使用 jQuery 的下拉菜单示例：jsfiddle
jQuery:
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:
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:
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;
}
?
