Jquery I'；m有z索引和居中问题，带有内置css的水平子菜单[wordpress] 守则：

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

我在水平子菜单设计中遇到了定位问题和z索引问题

我想整个过程都可以通过jquery处理（甚至可能是必要的）。我很高兴听到建议，如果有人有一个脚本，将在这里工作

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

functions.php 导航html

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

---

还有一个关于它应该如何工作的快速而肮脏的gif：

---

---

如果有人能帮忙，我将不胜感激。

您在找这个吗：

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

编辑：将菜单居中

---

感谢一位好心的陌生人——我会投你的票，但我还没有达到最低的“声誉”计数。。。我想您不知道如何将子菜单居中对齐到浏览器视图端口，而不是在父容器中向左浮动？（）可能不是你想要的，但仍然是。我必须将

子菜单的
显示
及其
li
更改为
内联块
，以获得正确的宽度。然后只有两行
jQuery
。它现在在中心，但不容易点击。你可能应该使用，而不是我原来答案中的版本。找到了一种方法。这真的很糟糕
jQuery
，但它做到了。请看这里：。这太完美了！我相信其他正在寻找解决类似问题的方法的人会很高兴看到你的帖子。你真的让我摆脱了这段代码的束缚。不要停止表现得太棒：）
<?php wp_nav_menu(); ?>

.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*/
}