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

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-blocks，然后制作子菜单blocks。然后只需使用 css :hover 选择器和子菜单的一些绝对定位就可以了。做了一个小提琴给你演示。

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

Answer 2

http://jsfiddle.net/UVkGG/

.menu{
    white-space:nowrap; /* Stops the menu from wrapping if the container is too small */
}
.menu>li{
    display:inline-block; /* Put menu items on one line */
    height:20px; /* Set default height for top level menu */
    width:200px;
    padding:5px;
    line-height:24px;
    background:#eee;
    vertical-align:top; /* Align menu li's to top of page*/
    list-style:none;
    cursor:pointer;
    overflow:hidden; /* Hide sub menu */
}
.menu>li:hover{
    height:auto; /* Remove height limit to show sub menu */
}
.sub-menu{
    margin:0; padding:0;
}
.sub-menu>li{
    display:block; /* Put sub-menu items on separate lines */
    padding:5px;
    margin:2px;
    background:#ccc;
    list-style:none;
    cursor:pointer;
}
.sub-menu>li:hover{
    background:#aaa;
}
.menu a{
    text-decoration:none;
    color:#111;
    font-weight:bold; 
    display:block; /* Makes the entire highlighted block clickable not just the text */
}