Javascript 当我悬停在链接上时，下拉菜单关闭

我创建了一个下拉菜单

<a href="#" onMouseOver="showMenu('portfolio')"  class="navationlinks">Portfolio</a>

<div id="menu2" onMouseOut="closeMenu()" class="menu">
                    <a href="heave.php">2D</a><br>
                    <a href="#">3D</a><br>
                    <a href="#">Video</a><br>
                    <a href="#">SketchBook</a>
                </div>

在我进入div元素之前，它一直处于打开状态，但当我将鼠标悬停在该div元素内的链接上时，它将关闭

任何解决办法。当我在div元素中的链接上悬停时，如何保持它的打开状态

$(document).on('click', function(e) {
    var elem = $(e.target).closest('#PortfolioLink'),
    box = $(e.target).closest('#Menu2');
 if (elem.length) {
    e.preventDefault();
    $('#Menu2').toggle();
   } else if (!box.length) {
       $('#Menu2').hide();
    }
 });

---

只需包装您提供的另一个

div

的整个HTML，并将

showMenu（'portfolio'）

函数分配给它，而不是分配给链接。 请在此处查看：

这是我使用的HTML：

<div onMouseOver="showMenu('portfolio')">
    <a href="#" class="navationlinks">Portfolio</a>
    <div id="menu2" onMouseOut="closeMenu()" class="menu">
        <a href="heave.php">2D</a><br />
        <a href="#">3D</a><br />
        <a href="#">Video</a><br />
        <a href="#">SketchBook</a>
    </div>
</div>

---

在javascript中不是jquery

<div onMouseOver="showMenu('portfolio')">
    <a href="#" class="navationlinks">Portfolio</a>
    <div id="menu2" onMouseOut="closeMenu()" class="menu">
        <a href="heave.php">2D</a><br />
        <a href="#">3D</a><br />
        <a href="#">Video</a><br />
        <a href="#">SketchBook</a>
    </div>
</div>

<a onMouseEnter="showMenu('portfolio')" href="#" class="navationlinks">Portfolio</a>
<div id="menu2" onMouseLeave="closeMenu()" class="menu">
    <a href="heave.php">2D</a><br />
    <a href="#">3D</a><br />
    <a href="#">Video</a><br />
    <a href="#">SketchBook</a>
</div>