如何在HTML里面实现鼠标划上去导航出现下拉菜单呢?或者说用js插件如何调用?

如何在HTML里面实现鼠标划上去导航出现下拉菜单呢?或者说用js插件如何调用?
最新回答
意中人

2026-05-27 09:49:14

这个用jQuery就的toggle函数可以实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<script   src="
>
    <style>
        .main
        {
            list-style: none;
            float: left;
            margin-left: 20px;
        }
        .main li
        {
            list-style: none;
            text-align: left;
            margin-left: -40px;
        }
        .main ul
        {
            display: none;
        }
        .main a
        {
            text-decoration: none;
        }
        .main li a
        {
            text-decoration: none;
        }
    </style>
</head>
<body>
<ul id="uid">
    <li class="main"><a href="#">菜单一</a>
    <ul>
        <li><a href="#">子菜单</a></li>
        <li><a href="#">子菜单</a></li>
        <li><a href="#">子菜单</a></li>
    </ul>
    </li>
    <li class="main"><a href="#">菜单二</a>
        <ul>
            <li><a href="#">子菜单</a></li>
            <li><a href="#">子菜单</a></li>
            <li><a href="#">子菜单</a></li>
        </ul>
    </li>
    <li class="main"><a href="#">菜单三</a>
        <ul>
            <li><a href="#">子菜单</a></li>
            <li><a href="#">子菜单</a></li>
            <li><a href="#">子菜单</a></li>
        </ul>
    </li>
</ul>
</body>
<script >
$(document).ready(
    function () {
        $(".main").hover(function () {
            $(this).children("ul").toggle();
        })
    }
)
</script>
</html>