【Java Web】下拉菜单

最新推荐文章于 2024-09-21 21:56:14 发布

-flop-

最新推荐文章于 2024-09-21 21:56:14 发布

阅读量1.3k

点赞数

分类专栏： Java Web 文章标签：前端 java javascript css

本文链接：https://blog.csdn.net/qq_33171309/article/details/127155762

版权

Java Web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

利用jQuery及CSS实现页面下拉子菜单，光标移至对应区域显示该区对应子菜单。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态下拉子菜单</title>
    <script src="js/jquery-3.6.1.js"></script>
    <style>
        .menu {
            width: 100%;
            height: 50px;
        }

        .menu ul {
            margin: 0;
            padding: 0;
            background: crimson;
        }

        .menu ul li {
            width: 100px;
            height: 50px;
            list-style: none;
            float: left;
            text-align: center;
            background: #FFA500;
            line-height: 50px;
            font-size: 20px;
        }

        .menu ul li:hover {
            background: thistle;
            cursor: pointer;
        }

        .menu ul li div {
            width: 100px;
            height: 350px;
            position: absolute;
            background: coral;
            display: none;
        }
    </style>
</head>
<body>
<div id="menu" class="menu">
    <ul>
        <li>项目一
            <div>
            	<p><a href="">子项目一</a>
                <p><a href="">子项目二</a>
                <p><a href="">子项目三</a>
                <p><a href="">子项目四</a>
                <p><a href="">子项目五</a>
            </div>
        </li>
        <li>项目二
            <div>
            	<p><a href="">子项目一</a>
                <p><a href="">子项目二</a>
                <p><a href="">子项目三</a>
                <p><a href="">子项目四</a>
                <p><a href="">子项目五</a>
            </div>
        </li>
        <li>项目三
            <div>
                <p><a href="">子项目一</a>
                <p><a href="">子项目二</a>
                <p><a href="">子项目三</a>
                <p><a href="">子项目四</a>
                <p><a href="">子项目五</a>
            </div>
        </li>
        <li>项目四
            <div>
                <p><a href="">子项目一</a>
                <p><a href="">子项目二</a>
                <p><a href="">子项目三</a>
                <p><a href="">子项目四</a>
                <p><a href="">子项目五</a>
            </div>
        </li>
    </ul>
</div>
<script type="text/javascript">
    $("#menu ul li").mouseover(function () {
        $(this).find("div").css('display', 'block');
    });
    $("#menu ul li").mouseout(function () {
        $("#menu ul li div").css('display', 'none');
    });
</script>
</body>
</html>