js实现下拉菜单

最新推荐文章于 2024-06-13 09:00:00 发布

I like study.

最新推荐文章于 2024-06-13 09:00:00 发布

阅读量672

点赞数 1

分类专栏： # JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/rj2017211811/article/details/104770449

版权

JavaScript 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

<head>
	<style type="text/css">
       .nav {
            list-style-type: none;
            display: flex;
            margin: 0;
            padding: 0;
            font-size: 14px;


        }

        .nav .nav-item {
            width: 100px;
            display: flex;
            flex-flow: column nowrap;


        }

        .nav .nav-item a {
            display: block;
            width: 90px;
            height: 30px;
            color: #4c4c4c;
            text-decoration: none;
            text-align: center;
            line-height: 30px;
        }

        .nav .nav-item a:hover {
            background-color: #EDEEF0;
        }

        .nav .nav-item .nav-item-ul {
            display: none;
            list-style-type: none;
            /* display: flex;
            flex-flow: column nowrap;*/
            margin: 0;
            padding: 0;


        }

        .nav .nav-item .nav-item-ul .nav-item-ul-li {
            width: 90px;
            height: 30px;
            border-top: 0;
            border-bottom: 1px solid #4c4c4c;
            border-left: 1px solid #4c4c4c;
            border-right: 1px solid #4c4c4c;

        }
    </style>
</head>

<body>
    <ul class="nav">
        <li class="nav-item">
            <a href="#1">微博</a>
            <ul class="nav-item-ul">
                <li class="nav-item-ul-li"><a href="#11">私信</a></li>
                <li class="nav-item-ul-li"><a href="#12">评论</a></li>
                <li class="nav-item-ul-li"><a href="#13">@我</a></li>
            </ul>
        </li>
        <li class="nav-item">
            <a href="#2">博客</a>
            <ul class="nav-item-ul">
                <li class="nav-item-ul-li"><a href="#21">博客评论</a></li>
                <li class="nav-item-ul-li"><a href="#22">未读提醒</a></li>

            </ul>
        </li>
        <li class="nav-item">
            <a href="#3">邮箱</a>
            <ul class="nav-item-ul">
                <li class="nav-item-ul-li"><a href="#31">免费邮箱</a></li>
                <li class="nav-item-ul-li"><a href="#32">VIP邮箱</a></li>
                <li class="nav-item-ul-li"><a href="#33">企业邮箱</a></li>
                <li class="nav-item-ul-li"><a href="#34">新浪邮箱客户端</a></li>
            </ul>
        </li>
    </ul>
    <body>

js部分

	<script type="text/javascript">
		var nav = document.querySelector('.nav')
        // console.log(nav)
        var navItems = nav.children
        //console.log(navItems)
        for (var i = 0; i < navItems.length; i++) {
            navItems[i].onmouseover = function () {
                this.children[1].style.display = 'block'
            }
            navItems[i].onmouseout = function () {
                this.children[1].style.display = 'none'
            }
            /* console.log(navItems[i].children[0])
             console.log(navItems[i].children[1])*/
        }
	</script>

I like study.

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js实现下拉菜单

<head> <style type="text/css"> .nav { list-style-type: none; display: flex; margin: 0; padding: 0; font-size: 14px; ...
复制链接

扫一扫

专栏目录