下拉菜单-蒲公英云

下拉菜单

在这里插入图片描述

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ 
            margin: 0;
            padding: 0;
        }
        div { 
            width: 80px;
        }
        a { 
            display: block;
            width: 80px;
            height: 50px;
            font-size: 14px;
            text-align: center;
            line-height: 50px;
            text-decoration: none;
            border: 1px solid orange;
        }
        ul { 
            display: none;
        }
        li { 
            width: 80px;
            text-align: center;
            list-style: none;
            border: 1px solid orange;
        }
    </style>
</head>
<body>
    <div>
        <a href="#">test</a>
    <ul>
            <li><a href="#">私信</a></li>
            <li><a href="#">评论</a></li>
            <li><a href="#">@我</a></li>
        </ul>    
    </div>
    <script>
        var a = document.querySelector('div');
        var ul = document.querySelector('ul');
        var li = document.querySelectorAll('li'); a.onmouseover = function() { 
            ul.style.display = 'block';
        }
        a.onmouseout = function () { 
            ul.style.display = 'none';
        }
        for(var i = 0 ; i < li.length ; i++){ 
            li[i].onmouseover = function () { 
                this.style.backgroundColor = '#fff5da';
                this.style.color = "red";
            }
            li[i].onmouseout = function() { 
                this.style.backgroundColor = 'white';
                this.style.color = "#4c4c4c";
            }
        }
    </script>
</body>
</html>