关于SO的第一个问题,希望它能够解决,对于精通css艺术的人来说应该是一个简单的解决方案......
我遇到的问题是我的css驱动导航的下拉部分导致其下方的内容向右移动.我发现了类似的问题,但我已经尝试了所有提供的解决方案,似乎没有任何工作......
我设法得到的最接近的是添加position:absolute;到#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> …