我有一个用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' );

nav 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