Html 使链接保持在页面上，直到光标未悬停在其上

我目前正在制作一个水平下拉菜单，我让它工作，这样当你把鼠标悬停在一个图像上，随后的图像就会出现在它下面，然后当你离开主链接时；它们消失了。 但问题是，我希望这样，当你将鼠标悬停在一个后续链接上时，这些链接会一直保留，直到你离开它们，当你移动到链接上时，它们会消失

HTML:

谢谢你的帮助

下面是一些JSFIDLE，可以帮助您将其可视化：

---

通常，您必须在父菜单项（

li.fixtures

）内添加整个子菜单（

ul

元素）。下面是一个简单的示例（在您提供的JSFIDLE中更新）：

HTML：

<nav id="navigation">
    <ul style="list-style:none">
        <li class="fixtures"><a> This is main link </a>
            <ul style="list-style:none" class="hidden">
                <li><a> This is first sub-link </a></li>
                <li><a> This is Second sub-link </a></li>
            </ul>
        </li>
    </ul>
</nav>

---

对于投票的人-1：你应该帮助OP告诉他为什么投票失败。

    #navigation ul.fixtures:hover{ /*  Makes anything with the class 'hidden' appear when hover over anything with 'fixtures class'  */
        color: #000;
        margin-top:1px;
    -webkit-transition-duration: 0.4s;
    cursor: pointer;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    box-shadow: 0px 0px 20px rgba(0,235,255,0.8);
    -webkit-box-shadow: 0px 0px 20px rgba(255,102,51,0.8);
    background: rgba(255,102,51,0.8);
    opacity: 50%;

}
ul.hidden{      

    display: none;
    position:absolute;  
    margin-top:-90px;
    margin-left:110px;
}

li.fixtures:hover +  ul.hidden{ /*  Makes anything with the class 'hidden' appear when hover over anything with 'fixtures class'  */
    display: block;
    position:absolute;  
    margin-top:-20px;
    margin-left:72px;
}

<nav id="navigation">
    <ul style="list-style:none">
        <li class="fixtures"><a> This is main link </a>
            <ul style="list-style:none" class="hidden">
                <li><a> This is first sub-link </a></li>
                <li><a> This is Second sub-link </a></li>
            </ul>
        </li>
    </ul>
</nav>

ul.hidden {
    display: none;
    position:absolute;
}
li.fixtures:hover ul.hidden {
    /* Applied to the child ul  */
    display: block;
    margin-top:-20px;
    margin-left:72px;
}