我在第一个问题上，希望这要取决于划痕，应该是对CSS艺术精通的人的简单解决方案...
我的问题是，我的CSS驱动导航的下拉部分导致其下方的内容向右移动。我发现了发布的类似问题，但我尝试了所有提供的解决方案，似乎没有任何解决方案可以工作....
我设法获得的最接近的是将 position:absolute;添加到 #nav li:hover ul标签中，这确实阻止了内容四处移动，但是创建一个新问题，只有当鼠标在顶级菜单上时，下拉列表sumbenu才能看到项目，试图将鼠标向下移动，使其消失了……我发现的另一个问题同样令人沮丧地解决...
导航的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上搜索，等等）找到解决方案，就像在各种定位配置中玩耍一样，但我似乎无法解决这个问题...感谢提前的任何帮助，这个问题让我整天都发疯了！
更新
终于有机会重新看一下。您只需要将以下内容添加到#nav li ul：
position: absolute;
z-index: 100;
在IE8/9（FF和Chrome）中工作，尽管子菜单的定位在IE7中关闭，无论有没有更改。为了解决该问题，我建议通过您喜欢的任何方法推荐IE7特定的CSS。
您可以尝试使用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;
}