html - 我有 2 个 UL，其中一个出现在悬停状态；但不能足够快地将鼠标移到它上面

Question

我想拥有一个水平菜单，当您将鼠标悬停在某个元素上时，它下方会出现一个垂直菜单 (menu2)。当悬停在菜单 2 中的元素上时，第三个菜单出现在 menu2 旁边，高度与菜单 2 中悬停的元素相同。 http://gcommerce2.gtdsites.com/ (这是我正在构建的菜单，它位于“主页”下方) 我一切正常。您在 menu2 中悬停以显示 menu3 的元素是“submenu2”。唯一的问题是，当您将鼠标移到菜单 3 上并尝试选择菜单 3 中的一项时，在您将鼠标移到菜单 3 上之前一切都消失了。 这是代码:

<style>
nav a { 
text-decoration: none;
font: 12px/1 Verdana;
color: #000;
display: block; }
nav a:hover { text-decoration: underline; }
nav ul { 
list-style: none;
margin: 0;
padding: 0; }
nav ul li { margin: 0; padding: 0; }

/* Top-level menu */
nav > ul > li { 
float: left;
position: relative; }
nav > ul > li > a { 
padding: 10px 30px;
border-left: 1px solid #000;
display: block;}
nav > ul > li:first-child { margin: 0; }
nav > ul > li:first-child a { border: 0; }

/* Dropdown Menu */
nav ul li ul { 
position: absolute;
background: #ccc;
width: 100%; 
margin: 0;
padding: 0;
display: none; }
nav ul li ul li { 
text-align: center;
width: 100%; }
nav ul li ul a { padding: 10px 0; }
nav ul li:hover ul { display: block; }


a.menu2:link + ul.menu3 {display: none;}
a.menu2:hover + ul.menu3 {display: inline-block; }

.format_text ul ul {
margin: 0 0 0 .95em;
}

a.menu2, li.menu2 {display: inline-block;}

ul.menu2, ul.menu3 {border: black 2px solid;}


</style>

<nav>
<ul>
    <li><a href="#">Link</a></li>
    <li>
        <a href="#">Link2</a>
        <ul class="menu2">
            <li><a href="#">Submenu1</a></li>

            <li class="menu2"><a class="menu2" href="#">Submenu2</a>



            <ul class="menu3">
            <li><a class="menu3" href="#">gmenu1</a></li>
            <li><a href="#">gmenu22</a></li>
            <li><a href="#">gmenu3</a></li>

            </ul>





            </li>
            <li><a href="#">Submenu3</a></li>

        </ul>
    </li>
    <li><a href="#">Link3</a></li>
   </ul>
</nav>

<br style="clear:both;"/>

有人可以帮忙吗？

Answer 1

看看 http://jqueryui.com/menu/插入。这比尝试编写自己的菜单结构要容易得多

示例 http://jsfiddle.net/h7N5R/