Html 防止多个子菜单'；当只有一个悬停时（由于过渡延迟），s将无法同时可见

更新了这里的代码示例

很难用一个标题来概括，我做了一个代码笔来显示发生了什么：

菜单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>

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

菜单
项目1
项目1
子菜单1

项目1
项目2
项目3


子菜单2

项目1
项目2
项目3


子菜单3

项目1
项目2
项目3

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

但这也会导致当您快速悬停多个项目时，同时打开多个子菜单。（你可以在钢笔里看到这个）

当显示另一个子菜单项时，我需要缩短子菜单的动画/过渡

---

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

添加ul li：悬停li转换延迟：5s，它不会出现，而其他具有转换延迟：4s的li不会隐藏

或者像这样使用一些

<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>

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

显示所有菜单HTML代码（你们放了链接，但我不能在我的旧浏览器和低速互联网上打开网站），以便于理解你们在哪里显示witch元素。因为，如果我将html代码放入文件并打开，则不会显示任何内容，因为li设置为

可见性：隐藏

。如何单击或鼠标悬停在此处

css

不更改

css

。试试jquery。你还想要什么

$('ul').find('li').each({ if($(this).attr('hovered')=='not') $('this').css('display','none');  });

---

您仍然需要确定如何在jquery中确定悬停元素（

$（this）.attr（'hovered'）==not

）

您可能需要使用JavaScript来隐藏子菜单，无论何时另一个子菜单悬停基本上，这是我的问题，是的。这两种解决方案都无法解决我的问题。也许我没有正确地解释情况。将菜单项悬停时，会出现一个子菜单。当您用鼠标离开此子菜单时，会有一个（css转换）延迟，以防止您意外地离开和关闭菜单。但是，当您将鼠标悬停在出现子菜单的多个菜单项上时，它们都会停留在设置的“过渡延迟”时间内。我想改变这一点，这样当另一个项目悬停/可见时，任何其他仍在“转换”/“延迟”的项目都会关闭（或者只是将延迟更改为0）。我更新了主帖子中的代码，它现在拥有完整的html和css。