javascript - 纯 CSS 和 JS 下拉菜单 - onmouseover 问题

Question

我编写这段代码是为了创建简单的 CSS 和 Javascript 下拉菜单。

HTML:

<li><a href="#" onmouseover="showRanksSubmenu()" onmouseout="hideRanksSubmenu()">XYZ</a>
    <ul id="rankSubMenu" onmouseover="showRanksSubmenu()" onmouseout="hideRanksSubmenu()">
        <li><a href="#" style="position: absolute; top: 12px;">AAA</a></li>
        <li><a href="#" style="position: absolute; top: 50px;">BBB</a></li>
        <li><a href="#" style="position: absolute; top: 88px;">CCC</a></li>
    </ul>
</li>

CSS:

#rankSubMenu {
     display: none; 
     position: absolute; 
     bottom: 10px;
     left: 278px;
}

JS:

function showRanksSubmenu() {
    document.getElementById('rankSubMenu').style.display = 'block';
}

function hideRanksSubmenu() {
    document.getElementById('rankSubMenu').style.display = 'none';
}

菜单项当然有一些高度、背景和其他东西，使它们看起来像按钮。问题是，这个按钮之间有一些空白空间(比如几个像素)，当用户将鼠标光标停在那里时，菜单就会消失(事实上菜单总是这样做，除非你快速移动光标)。我试图将整个区域定义为 div 或尝试我想到的任何其他想法，但没有成功。有什么建议可以解决这个问题吗？

Answer 1

首先，欢迎来到 Web 开发的精彩世界。根据您对内联样式的使用，li 作为顶级容器，并尝试使用 Javascript 进行简单的菜单显示/隐藏，我可以告诉您您很新。不管!这是一个学习过程，Web 开发很有趣。 :)

首先，对于你想要的，你可以只通过 CSS 来完成，而不需要在你的菜单项中使用 position:absolute 或任何类似的东西。这是一个更清晰的菜单显示的工作示例:

jsFiddle example

我对学习过程的建议:

1. 熟悉外部 CSS 表，内联样式的使用非常古老，而且很难维护
2. 了解在设置样式时类比 ID 的优势；很少(从不？)您需要使用 ID 来设置样式，通常首选类，因为您可以将它应用于多个元素
3. 熟悉正确的语义标记；例如 li 不应该是顶级容器，只有另一个 ul 的容器，如果有子列表或其他东西的话
4. 学习外部 JS 事件处理程序；在 HTML 中使用内联 onwhatever 处理程序是另一种非常古老的方法，并且再次使维护变得非常困难

祝你好运!