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

Question

密码：http://jsfiddle.net/TwCLr/

如果你想看看我想要完成什么，请跳到这篇文章底部的链接。

我在水平子菜单设计中遇到定位问题以及 z-index 问题。

我想这整个过程可以通过 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

你在找这个吗：Fiddle

添加/更改 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*/
}

编辑：菜单居中

Fiddle Here

Full-screen here