html - 创建下拉菜单，子菜单出现在鼠标悬停时

Question

我正在寻找创建 CSS 以在“从左到右”div 中显示这些链接，并且当发生“滚动”之类的操作时，相应的子菜单将出现在它们刚刚滚动的菜单正下方。

这是关键。这个菜单将从 wordpress 数据库“动态加载”，所以我需要知道如何设置“主菜单”的样式，然后在每个菜单的翻转时，下拉列表将出现在下面的正确位置。但是我不能硬编码名称，因为菜单项会改变等等。这有意义吗？

这是一个从 wordpress 数据库加载的动态示例。

下面这段代码:

<? 
require('wordpress/wp-blog-header.php');
?>

<div class="access">
  <?php wp_nav_menu(); ?>
</div>

在下方加载以下 HTML:

<div class="access">
  <div class="menu-papamenu-container"><ul id="menu-papamenu" class="menu"><li id="menu-item-45" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-45"><a href="?p=love">Home</a>
<ul class="sub-menu">
    <li id="menu-item-46" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46"><a href="?p=Happy">Happy</a></li>
    <li id="menu-item-47" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-47"><a href="?p=coolBeans">Cool Beans</a></li>
    <li id="menu-item-49" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-49"><a href="?p=SoHappy">So Happy</a></li>
</ul>
</li>
<li id="menu-item-48" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-48"><a href="?p=Contact">Contact Us</a>
<ul class="sub-menu">
    <li id="menu-item-50" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-50"><a href="?p=Address">Address</a></li>
    <li id="menu-item-51" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-51"><a href="?p=Phone">Phone</a></li>
    <li id="menu-item-52" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-52"><a href="?p=Email">Email</a></li>
</ul>
</li>
<li id="menu-item-53" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-53"><a href="?p=About">About Us</a>
<ul class="sub-menu">
    <li id="menu-item-54" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-54"><a href="?p=Company">Company</a></li>
    <li id="menu-item-55" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-55"><a href="?p=CompanyAddress">Company Address</a></li>
</ul>
</li>
</ul></div></div>

但是我如何添加 CSS 来为其提供适当的导航下拉菜单等？

没有CSS的OUTPUT可以是seen here .

Answer 1

我倾向于为此制作顶级 li 的 inline-block，然后制作子菜单 block。然后只需使用 css :hover 选择器和子菜单的一些绝对定位就可以完成这项工作。制作了一个 fiddle 供您演示。

http://jsfiddle.net/jaredkhan/EuH8P/1