下拉菜单-从CSS移动到使用JavaScript运行

我有下面的菜单，它有下拉菜单，正如你在HTML中看到的，所有的CSS都准备好了，我尝试使用CSS使其成为下拉功能，但它不是很好，所以我尝试使用JavaScript或其他方法来实现

我正在使用这个脚本，但由于某些原因它不起作用，我做错了什么

$("ul#mainMenu li").hover(function () {
    $(this).parent().next("ul").show();
});

这是HTML

<nav>
    <ul id="mainMenu"><!--Main Menu-->
        <li class="first">
            <a href="#">Home</a>
            <ul>
                <li><a href="intro1.php">Intro 1</a></li>
                <li><a href="intro2.php">Intro 2</a></li>
                <li><a href="intro3.php">Intro 3</a></li>
                <li><a href="vision.php">Vision</a></li>
                <li><a href="contacts.php">Contacts</a></li>
                <li><a href="staff.php">Staff</a></li>
                <li><a href="use.php">Use</a></li>
                <li><a href="crisis.php">Crisis</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Basics</a>
            <ul>
                <li><a href="definition1.php">Definition 1</a></li>
                <li><a href="definition2.php">Definition 2</a></li>
                <li><a href="definition3.php">Definition 3</a></li>
                <li><a href="assess1.php">Assess 1</a></li>
                <li><a href="assess2.php">Assess 2</a></li>
                <li><a href="assess3.php">Assess 3</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Need</a>
            <ul>
                <li><a href="world1.php">World 1</a></li>
                <li><a href="world2.php">World 2</a></li>
                <li><a href="world3.php">World 3</a></li>
                <li><a href="polar1.php">Polar 1</a></li>
                <li><a href="polar2.php">Polar 2</a></li>
                <li><a href="polar3.php">Polar 3</a></li>
                <li><a href="national1.php">National 1</a></li>
                <li><a href="national2.php">National 2</a></li>
                <li><a href="national3.php">National 3</a></li>
                <li><a href="alaska1.php">Alaska 1</a></li>
                <li><a href="alaska2.php">Alaska 2</a></li>
                <li><a href="alaska3.php">Alaska 3</a></li>
                <li><a href="alaska4.php">Alaska 4</a></li>
                <li><a href="fairbanks.php">Fairbanks</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Models</a>
            <ul>
                <li><a href="durkheim.php">Durkheim</a></li>
                <li><a href="joiner.php">Joiner</a></li>
                <li><a href="nami.php">NAMI</a></li>
                <li><a href="mental.php">Mental</a></li>
                <li><a href="church.php">Church</a></li>
                <li><a href="menninger.php">Menninger</a></li>
                <li><a href="weaver-wright.php">Weaver/Wright</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Approach</a>
            <ul>
                <li><a href="trees1.php">Trees 1</a></li>
                <li><a href="trees2.php">Tress 2</a></li>
                <li><a href="goals1.php">Goals 1</a></li>
                <li><a href="goals2.php">Goals 2</a></li>
                <li><a href="training1.php">Training 1</a></li>
                <li><a href="training2.php">Training 2</a></li>
                <li><a href="gas1.php">Gas 1</a></li>
                <li><a href="gas2.php">Gas 2</a></li>
                <li><a href="boat1.php">Boat 1</a></li>
                <li><a href="boat2.php">Boat 2</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Library</a>
            <ul>
                <li><a href="stories.php">Stories</a></li>
                <li><a href="books.php">Books</a></li>
                <li><a href="plays.php">Plays</a></li>
                <li><a href="epics.php">Epics</a></li>
                <li><a href="movies.php">Movies</a></li>
                <li><a href="articles.php">Articles</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Web</a>
            <ul>
                <li><a href="arctic.php">Arctic</a></li>
                <li><a href="national.php">National</a></li>
                <li><a href="supports.php">Supports</a></li>
                <li><a href="reference.php">Reference</a></li>
            </ul>
        </li>
    </ul>
</nav>

---

对代码进行一次以下的更改

$("ul#mainMenu li").hover(function () {
    $("ul",this).show();
});

---

请参见您必须在

此
中找到
ul
，其中
此
属于悬停
li
：

$("ul#mainMenu li").hover(function () {
    $("ul",this).show(); // <--show the ul in this li
});

请尝试使用这些问题，让我们的生活更轻松。
$("ul#mainMenu li").hover(function () {
    $("ul",this).show(); // <--show the ul in this li
});

$("ul#mainMenu li").hover(function () {
    $(this).find("ul").show(); // <--show the ul in this li
});