css - 比父 li 更宽的 Fluid sub 子菜单 | wp_nav_menu

Question

使用 wp_nav_menu Wordpress 创建了一个易于维护的漂亮导航。目前导航有一个子菜单和一个子子菜单。当您将鼠标悬停在链接 2 上时，将打开一个大子菜单，其中包含 5 个子菜单及其下方的子子菜单(这样您就可以看到菜单下的内容)。

带有原始菜单的 JSFiddle 示例 http://jsfiddle.net/tSLqV/1/

通常 .sub-menu 将是 postion:absolute 因为它必须悬卡在某些元素上。但出于某种原因，jsfiddle 无法以这种方式正确显示 .sub.menu。所以在示例中它现在是 position:relative。

=====

JSFiddle Example 我让它工作的一部分 http://jsfiddle.net/HYBA7/5/

=====

有什么问题？ 好吧，我可以显示子菜单，包括子子菜单，但我希望它是流畅的。如果一个子子菜单不适合，它将落在其他子子菜单下，并带有 float:left;然后子菜单将调整高度。

通常我会这样做: 最大宽度:940px； 宽度:100%；

问题是这个 ul 是嵌套的。当我使用 100% 时，由于 li 父级，它将以 25% 显示所有元素。不确定为什么它与第二个 JSFiddle 一起工作......

然后我考虑给 ul 设置 400% 的宽度(4 x 25% 等于 100%)，但这也不起作用。

=====

在这个 ul li ul li ul li mess 花了 2 天之后，我一直在寻找一种不同的方法。如果我能摆脱所有这些 ul li 怎么办？取而代之的是一个 div (不确定这是否是一个好方法)。然后 div 不会有父级宽度的问题吗？ 查看 Wordpress Codex，我发现可以删除第一个 ul 并更改一些类，但仅此而已。

我不确定第 4.7 部分是否通过向菜单项添加条件类，因为它仍然具有 ul li 并且宽度将取决于父 ul li 的内容。

我读过有关 Walkers 的文章，但我没有设法让 ul.sub-menu 在 div 元素中转换。

=====

我知道可以加载一个额外的菜单，其中只有这 5 个子菜单和子子菜单，并让它通过 jQuery 滑入，但我喜欢在没有 javascript 帮助的情况下使用它，并且只使用 css。

谁能帮我解决这个问题？

Answer 1

好吧，我已经设法让子菜单流畅了。

我找到了一个为每个子菜单添加类(0 级、1 级)的 Walker。

 class UL_Class_Walker extends Walker_Nav_Menu {
  function start_lvl(&$output, $depth) {
    $indent = str_repeat("\t", $depth);
    $output .= "\n$indent<ul class=\"level-".$depth."\">\n";
  }      
}

然后我再次研究 400% 的想法。唯一需要的是 left 属性也需要一个以 % 为单位的值。所以我把它设为 -100%(因为有 4 个父菜单项——它需要在整个菜单上对齐)

li#menu-item-23 ul.level-0 {
position: absolute;
display: none;
/*width: 940px;*/
max-width: 960px;
width: 400%;
left: -100%;
background: #fff;
z-index: 100;

稍后将在 IE 中对其进行测试，但 Firefox 和 Safari 可以正常显示所有内容。