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

Question

我知道这是一个非常基本的问题，但我不知道如何在 Google 搜索中阐明我想要的内容来解决我的问题。

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

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

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

<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

可能是包装 div 造成的。如果您删除它，我原来的解决方案应该可以工作。您也可以尝试 Juventus18 的解决方案，但还要添加：

li.headlink { position: relative }

所以您的代码将是：

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

Answer 2

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

#cssdropdown {position:absolute}

查看 jsFiddle 上的示例

Answer 3

您是否尝试过在 li.headLink 上放置一个浮动，如下所示？这似乎是由于菜单项不浮动造成的。

li.headlink { float:left }

Answer 4

尝试将此行更改

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

为此

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