如何正确地使jQuery悬停工作

我有这个测试页面：

我试图为悬停功能创建一些jQuery。但我不确定该怎么做。有一些jQuery代码如下：

$('ul#environment li').hover(function() {
    $(this).find('ul:first-child').show();
}, function() {
    $(this).find('ul:first-child').hide();
});

$('ul#health li').hover(function() {
    $(this).find('ul:first-child').show();
}, function() {
    $(this).find('ul:first-child').hide();
});

        <div style="display:none;">
            <ul id="environment" >
                <li>Green Lifestyle</li>
                <li>Energy Use</li>
            </ul>
            <ul id="health">
                <li>Medicine</li>
                <li>Diet</li>
            </ul>
        </div>

页面上的HTML如下所示：

$('ul#environment li').hover(function() {
    $(this).find('ul:first-child').show();
}, function() {
    $(this).find('ul:first-child').hide();
});

$('ul#health li').hover(function() {
    $(this).find('ul:first-child').show();
}, function() {
    $(this).find('ul:first-child').hide();
});

        <div style="display:none;">
            <ul id="environment" >
                <li>Green Lifestyle</li>
                <li>Energy Use</li>
            </ul>
            <ul id="health">
                <li>Medicine</li>
                <li>Diet</li>
            </ul>
        </div>

绿色生活方式
能源使用


药
饮食

然后我有一些HTML链接，我想在用户鼠标悬停时显示适当的悬停效果

---

我该怎么做？我似乎有不同的功能，但不知道如何让它们一起发挥。

您不能将鼠标悬停在未显示的内容上

<div style="display: none;">

---

因为您有

display:none，您的菜单不可见/不可悬停。删除此项，然后您可以从那里开始工作。
您正在尝试创建一个
悬停功能。您能否更准确地说明您想要实现的目标？您的页面当前引发异常：
ShowSubCategories未定义
。错误来自此行：
onmouseover=“ShowSubCategories（62）；”
。你错过了一个JS参考吗？@JamesHill排除了这个例外-谢谢。@pinouchon我希望鼠标悬停在不同的类别上。也许你对和之间的区别感到困惑。再看看这个问题：好的观点，但我并不想显示那个菜单。如何使它只在鼠标上方显示？如果您希望它在默认情况下可见，这很好，但您将无法将鼠标移到它上方。。。您必须将鼠标移到显示菜单的其他内容上。如果您能描述您试图创建的功能，我们肯定可以帮助您使其正常工作。就你目前的帖子而言，很难说出你想要创造什么。您希望整个菜单显示在悬停状态，还是只显示第一个
元素？