Question

我知道这是一个非常基本的问题，但我不知道如何在谷歌搜索中表达我想要解决我的问题。

我正在为一个非盈利组织的网站工作，我目前正在使用Jquery和CSS创建一个动态下拉导航栏。代码+示例可以在这里找到：http://designreviver.com/tutorials/jquery-css-example-dropdown-menu/

导航菜单效果很好，但是当元素展开时，新内容会强制页面上的其他内容向下移动，这会混淆网站的整个格式。大多数网站通常只有Nav栏元素扩展到页面的其余部分而不修改位置......

这是我正在使用的示例代码：

<ul id="cssdropdown">
<li class="headlink">
    <a href="mine.html?search_engines">Search Engines</a>
     <ul>
      <li><a href="http://google.com/">Google</a></li>
      <li><a href="http://yahoo.com/">Yahoo</a></li>
      <li><a href="http://live.com/">Live Search</a></li>
     </ul>
     </li>
      <li class="headlink">
      <a href="mine.html?shopping">Shopping</a>
         <ul>
      <li><a href="http://amazon.com/">Amazon</a></li>
      <li><a href="http://ebay.com/">eBay</a></li>
      <li><a href="http://craigslist.com/">CraigsList</a></li>
     </ul>
 </li>
</ul>

然后是CSS：

   li.headlink ul { display: none; }
   li.headlink:hover ul { display: block; }

有没有人对我可能做错了什么有任何见解？

谢谢！

戴夫

Answer 1

你试过像下面这样在li.headLink上放一个浮点数吗？这似乎是由于没有浮动您的菜单项造成的。

li.headlink { float:left }

Answer 2

尝试更改此行

li.headlink:hover ul { display: block; }

进入这个

li.headlink:hover ul { display: block; position:absolute; }

Answer 3

可能是导致它的包装div。如果您删除它，我的原始解决方案应该可行。您也可以尝试Juventus18的解决方案，但也要添加：

li.headlink { position: relative }

所以你的代码将是：

li.headlink { position: relative }
li.headlink:hover ul { display: block; position:absolute; }

Answer 4

如果您的标记允许，例如，您的菜单位于页面顶部，则绝对定位菜单。

#cssdropdown {position:absolute}

查看jsFiddle

上的示例

如何获取下拉Jquery导航菜单以扩展网页元素[基本]

4 个答案: