我在css [wordpress]内置的水平子菜单中遇到z-index和居中问题

Question

代码： http ： //jsfiddle.net/TwCLr/

如果您想查看我要完成的工作，请跳到本文底部的链接。

我在水平子菜单设计中遇到了定位问题以及Z索引问题。

我想这整个过程可以通过jquery处理（甚至可能是必要的）。 如果有人拥有可以在此处运行的脚本，我很乐意听到有关此建议。

我还应该提到菜单的html是使用wordpress生成的。 如果要更改该部分，则需要重写调用菜单的函数。

functions.php

function conceptx_setup() {
register_nav_menu( 'primary', __( 'Primary Menu', 'conceptx' ) );}
add_theme_support( 'menus' );

导航html

<?php wp_nav_menu(); ?>

如果这里有一个不需要更改html部分的解决方案，那将是理想的。 我在帖子顶部的jsfiddle链接中写出了wordpress生成的结构。

---

以及它应该如何运行的快速而肮脏的gif图像： http : //i.imgur.com/ptYeZDg.gif

---

如果有人可以提供帮助，我将非常感激。

Answer 1

您是否在寻找： 小提琴

添加/更改的CSS

.menu .menu-item:hover .sub-menu {
    top: 82px;
}

.menu .menu-item .sub-menu {
    position: absolute;
    left: 0;
    top: 16px;
    z-index: -1;
    width: 100%;
    transition: all .5s;
}

.menu .menu-item .sub-menu .menu-item a {
    opacity: 1 /* just remove opacity: 0*/
}

编辑：居中菜单

小提琴在这里

全屏显示