html - 当只有一个悬停时，防止多个子菜单同时可见(由于转换延迟)

Question

在此处更新了代码示例。

很难用标题来概括，我做了一个codepen来展示发生了什么:

http://codepen.io/erikdevos/pen/eJMmpy

    /* menu container styling  */
#nav {
    background: #f5f5f5;
    width:500px;
    display:flex;
}

/* style all unondered lists */
ul {
    text-decoration: underline;
    list-style-type: none;
    background: #cecece;
}

/* give submenu different background */
ul li ul {
    background: #e3e3e3;
}

/* add pointer to menu */
ul:hover {
    cursor: pointer;
}

/* make menu items visible when menu is hovered */
ul:hover > li {
    visibility: visible;
    transition-delay: 0s;
}

/* make menu items 
and add transition delay */
ul > li {
    visibility: hidden;
    transition-delay: .5s;
}
ul li:hover li {
    visibility: visible;
    transition-delay: 0s;
}

ul li:hover ul{ 
    visibility: visible;
    transition-delay: 0s;
}

菜单 html 看起来像这样

<div id="nav">

            <ul>MENU
                <li>item 1</li>
                <li>item 1</li>
                <li>submenu 1
                    <ul>
                        <li>item 1</li>
                        <li>item 2</li>
                        <li>item 3</li>
                    </ul>
                </li>
                <li>submenu 2
                    <ul>
                        <li>item 1</li>
                        <li>item 2</li>
                        <li>item 3</li>
                    </ul>
                </li>
                <li>submenu 3
                    <ul>
                        <li>item 1</li>
                        <li>item 2</li>
                        <li>item 3</li>
                    </ul>
                </li>
            </ul>

</div>

我制作了一个带有一些子菜单的菜单，并为可见性添加了过渡延迟:悬停/离开悬停时的“可见”和“隐藏”CSS 属性，以防止菜单在您移出菜单时过早消失。

但这也会导致当您快速悬停多个元素时同时打开多个子菜单。 (你可以在笔中看到这个)

我不知何故需要在显示另一个子菜单项时剪短子菜单的动画/过渡!

我在 CSS 中无能为力，这主要是我的领域，但我感觉 Javascript 或 jQuery 可以以某种方式监视属性和元素，并在元素 B 悬停时将元素 A 的转换延迟设置为 0 .这是一个可行的解决方案，还是有其他功能？

Answer 1

添加 ul li:hover li transition-delay: 5s 它不会出现而其他 li with transition-delay: 4s 不隐藏

或者像这样使用

 $('ul').find('li').each({$('this').css('visibility','hidden')});