Example017简单的下拉框

最新推荐文章于 2025-08-14 11:07:20 发布

weixin_34032792

最新推荐文章于 2025-08-14 11:07:20 发布

阅读量47

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/handsomehan/p/5380551.html

本文介绍了一种使用HTML和CSS创建简单下拉菜单的方法，并通过JavaScript实现鼠标悬停时显示子菜单的功能。此方法适用于初学者，可以帮助理解基本的网页布局和交互原理。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单的下拉框</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .main {
            width: 1200px;
            height: 300px;
            margin: 0 auto;
        }
        h3 {
            margin-left: 20px;
            background-color: #888;
        }
        .dis {
            float: left;
        }
        li {
            list-style: none;
            margin-left: 30px;
            margin-top: 10px;
        }
        ul {
            display: none;
            margin-left: 19px;
            background-color: #888;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="dis">
            <h3 onmouseover="one(0)">z选项一</h3>
            <ul>
                <li>111</li>
                <li>222</li>
                <li>333</li>
                <li>444</li>
            </ul>
        </div>
        <div class="dis">
            <h3 onmouseover="one(1)">z选项二</h3>
            <ul>
                <li>111</li>
                <li>222</li>
                <li>333</li>
                <li>444</li>
            </ul>
        </div>
        <div class="dis">
            <h3 onmouseover="one(2)">z选项三</h3>
            <ul>
                <li>111</li>
                <li>222</li>
                <li>333</li>
                <li>444</li>
            </ul>
        </div>
        <div class="dis">
            <h3 onmouseover="one(3)">z选项四</h3>
            <ul>
                <li>111</li>
                <li>222</li>
                <li>333</li>
                <li>444</li>
            </ul>
        </div>
    </div>
    <script>
        function one(num){
            var objs = document.getElementsByTagName("ul");
            for(var i = 0; i < objs.length;i ++) {
                if (i == num) {
                    objs[i].style.display = "block";
                }else {
                    objs[i].style.display = "none";
                }
            }
        } 
    </script>
</body>
</html>