Jquery水平下拉菜单？

我想做一个下拉菜单。我尝试这样做：

父菜单
子菜单
子菜单

但我有个问题。当鼠标离开父li时，子菜单容器滑动。它应该在鼠标悬停在子菜单容器上时可见。也许我无法解释，但如果你看看这个例子，你就会理解我

我怎样才能解决这个问题。或者你提供不同的服务？（子菜单是100%宽度的内联菜单）

---

谢谢。

如果您将html更改为此格式会更好

<nav>
    <ul id="top_menu">
        <li><a href="#">deneme</a></li>
        <li><a href="#">deneme</a>
            <ul>
                <li><a href="#">deneme</a></li>
                <li><a href="#">deneme</a></li>
                <li><a href="#">deneme</a></li>
                <li><a href="#">deneme</a></li>
           </ul>
        </li>
        <li><a href="#">deneme</a></li>
        <li><a href="#">deneme</a></li>
    </ul>
</nav>

---

并为此编写适当的jquery。

此时，关于sub-ul列表的定位还有另一个问题。它的左侧位置是从父li元素开始的。我希望所有子ul列表都位于相同的左起始位置。

<nav>
    <ul id="top_menu">
        <li><a href="#">deneme</a></li>
        <li><a href="#">deneme</a>
            <ul>
                <li><a href="#">deneme</a></li>
                <li><a href="#">deneme</a></li>
                <li><a href="#">deneme</a></li>
                <li><a href="#">deneme</a></li>
           </ul>
        </li>
        <li><a href="#">deneme</a></li>
        <li><a href="#">deneme</a></li>
    </ul>
</nav>