zoukankan      html  css  js  c++  java
  • 仿新浪下拉菜单

    页面布局分析

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            li {
                list-style-type: none;
            }
            a {
                text-decoration: none;
                font-size: 14px;
            }
            .nav {
                margin: 100px;
            }
            .nav>li {
                position: relative;
                float: left;
                 80px;
                height: 41px;
                text-align: center;
            }
            .nav li a {
                display: block;
                 100%;
                height: 100%;
                line-height: 41px;
                color: #333;
            }
    
            .nav>li>a:hover {
                background-color: #eee;
            }
            .nav ul {
                display: none;
                position: absolute;
                top: 41px;
                left: 0;
                 100%;
                border-left: 1px solid #FECC5B;
                border-right: 1px solid #FECC5B;
            }
            .nav ul li {
                border-bottom: 1px solid #FECC5B;
            }
            .nav ul li a:hover {
                background-color: #FFF5DA;
            }
        </style>
    </head>
    <body>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
    </ul>
    <script>
        //1 获取元素
        var nav = document.querySelector('.nav');
        var lis = nav.children;//得到4个li
        
        //2 for循环注册事件
        for (var i = 0; i < lis.length; i++) {
            //鼠标经过事件
            lis[i].onmousemove = function () {
                this.children[1].style.display = 'block';
            }
            //鼠标移出事件
            lis[i].onmouseout = function () {
                this.children[1].style.display = 'none';
            }
        }
    </script>
    </body>
    </html>
  • 相关阅读:
    2020-05-12 Linux基本操作
    SpringBoot项目设置能访问静态资源,resource/static目录下文件
    2020-04-25 Hadoop框架学习
    2020-05-24 vue简单语法
    2020-04-25 elasticsearch
    2020-04-25 kafka
    2020-04-11 函数式数据处理(Java8)
    2020-03-29 分布式事务解决方案(RocketMQ)
    配置文件示例
    Spring-data-redis实现消息队列的demo(附源码)
  • 原文地址:https://www.cnblogs.com/fuyunlin/p/14434018.html
Copyright © 2011-2022 走看看