html - 创建带有下拉菜单的子菜单的下拉菜单

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

这是钥匙。此菜单将从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的输出可以为seen here。

最佳答案

为此，我倾向于将顶层li设置为inline-block，然后将子菜单设置为block。然后，只需使用css：hover选择器和子菜单的某些绝对位置即可。为您展示了一个小提琴。

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

关于html - 创建带有下拉菜单的子菜单的下拉菜单，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18542194/