Javascript 如何解决具有不同参数的子菜单的悬停问题？

我有一个WordPress。 有一个名为sub-menu的类的悬停。 当我将鼠标移到上面时，鼠标会悬停并显示子页面。我已经找到了将自定义类添加到WordPress菜单（菜单->屏幕选项->CSS类）的解决方案，我给了它水平类

问题是我需要一个更深的z-指数来把它置于阴影之下 但当我尝试悬停它时，它消失了。（第二版）

如果没有Z-index（第1版），它甚至无法在移动设备上工作，因为它们不会将“手指鼠标移到”上，所以我的想法是在单击后修复子菜单并保持其打开状态

$('.horizontal a').click(function(e){
 e.preventDefault(); //to prevent the default behaviour of <a>
 $(this).parent().removeClass('sub-menu').addClass('submenu');//to change the css 
   });

$（'.horizontal a'）。单击（函数（e）{
e、 preventDefault（）；//防止的默认行为
$（this）.parent（）.removeClass（'sub-menu'）.addClass（'submenu'）；//更改css
});

这里的问题是，它在当前页面上这样做。不在页面上，我需要它

有什么解决办法吗？修复它是个好主意，还是有其他方法可以让移动设备在普通计算机上工作。

不能通过悬停使其生效，因为悬停使div本身及其子div生效。子div的z-index不能低于父div，因此这使得悬停在这种情况下毫无用处

在这里，您需要使用js和css。您可以使用mouseenter和mouseleave函数，您还需要修复z索引问题，我创建了一个演示来演示这个问题，它现在正在工作

.box1,.box2
{
    background-color:red;
    width:100px;
    height:100px;
    margin-left:10px;
    color:#FFF;
    line-height:100px;
    text-align:center;
    font-weight:bolder;
    display:block;
    -webkit-box-shadow: 0px 10px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 10px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 10px 5px 0px rgba(50, 50, 50, 0.75);
    position:relative;
    z-index:999;
}

.box2
{
    opacity:0;
    background-color:green;
    display:block;
    position:relative;
    z-index:1;
}

---

如果我正确理解了你的问题，那么一个可能对你有用的解决方案就是在课后添加渐变叠加

编辑-现在试一试，将阴影渐变放置到位，然后让

子菜单将其重叠。您可以通过在
子菜单上添加相同的渐变来直观地解决此问题，但调整其大小仅适合下拉菜单

HTML:

你说“它在当前页面上这样做。而不是在我需要的页面上”是什么意思？我想更改样式，如果父类可能是“当前菜单项”，例如，这不起作用，因为子菜单甚至消失在小提琴中。@theode，你是对的，我没有很好地测试它。不过，它现在应该可以工作了。绿色的盒子在鼠标滑过时消失了
<ul class="nav">
    <li>lorem
        <ul class="sub-nav">
            <li>Lorem ipsum.</li>
            <li>Lorem ipsum.</li>
            <li>Lorem ipsum.</li>
        </ul>
    </li>
    <li>lorem</li>
    <li>lorem</li>
</ul>

 .nav:after {
    content: "";
    display: block;
    position: absolute;
    top: 100%;
    left: 0px;
    width: 100%;
    height: 10px;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0,0,0,0.65)), to(rgba(0,0,0,0)));
    background: -webkit-linear-gradient(rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
    background: -moz-linear-gradient(rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
    background: -o-linear-gradient(rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
    background: linear-gradient(rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
}

 .sub-nav:after {
    content: "";
    display: block;
    position: absolute;
    top: 0%;
    left: 40px;
    width: 100px;
    height: 10px;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0,0,0,0.65)), to(rgba(0,0,0,0)));
    background: -webkit-linear-gradient(rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
    background: -moz-linear-gradient(rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
    background: -o-linear-gradient(rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
    background: linear-gradient(rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
}