JavaScript implements displaying a drop-down box when the mouse passes over it

JavaScript implements displaying a drop-down box when the mouse passes over it

This article shares the specific code of JavaScript to display the drop-down box when the mouse passes over it for your reference. The specific content is as follows

Code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .nav {
            margin: 100px auto;
            width: 500px;
        }
        
        .nav>li {
            float: left;
        }
        
        li {
            list-style: none;
        }
        
        a {
            display: block;
            text-decoration: none;
            color: gray;
            height: 40px;
            width: 100px;
            text-align: center;
            line-height: 40px;
            box-sizing: border-box;
        }
        
        .nav>li>a {
            color: black;
        }
        
        .nav>li>a:hover {
            background-color: lightgray;
        }
        
        .nav>li>ul>li>a {
            /* display: none; */
            border: 1px solid orange;
            border-top: none;
        }
        
        .nav>li>ul>li>a:hover {
            background-color: lightyellow;
        }
        
        .nav>li>ul {
            display: none;
        }
    </style>
</head>

<body>
    <ul class="nav" id=nav>
        <li>
            <a href="#" >Sina</a>
            <ul>
                <li><a href="#">News</a> </li>
                <li><a href="#">Sports</a> </li>
                <li><a href="#">News Flash</a> </li>
                <li><a href="#">Life</a> </li>
                <li><a href="#">Weibo</a> </li>
            </ul>
        </li>
        <li>
            <a href="#" >Sina</a>
            <ul>
                <li><a href="#">News 1</a> </li>
                <li><a href="#">Sports 1</a> </li>
                <li><a href="#">News Flash 1</a> </li>
                <li><a href="#">Life 1</a> </li>
                <li><a href="#">Weibo1</a> </li>
            </ul>
        </li>

        <li>
            <a href="#" >Sina</a>
            <ul>
                <li><a href="#">News 2</a> </li>
                <li><a href="#">Sports 2</a> </li>
                <li><a href="#">News Flash 2</a> </li>
                <li><a href="#">Life 2</a> </li>
                <li><a href="#">Weibo 2</a> </li>
            </ul>
        </li>


    </ul>

    <script>
        var heads = document.querySelectorAll('.nav>li');
        for (var i = 0; i < heads.length; i++) {
            heads[i].onmouseover = function() {
                this.children[1].style.display = "block";
            }
            heads[i].onmouseout = function() {
                this.children[1].style.display = "none";

            }
        }
    </script>
</body>

</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • The drop-down box effect produced by js when the mouse is suspended

<<:  Build a Docker private warehouse (self-signed method)

>>:  How to use the concat function in mysql

Recommend

MySQL recursion problem

MySQL itself does not support recursive syntax, b...

Quickly solve the problem of slow and stuck opening of input[type=file]

Why is it that when the input tag type is file an...

Summary of three ways to create new elements

First: via text/HTML var txt1="<h1>Tex...

How to mount the CD to find the rpm package under Linux

Written in front Sometimes you need to install so...

Linux kernel device driver character device driver notes

/******************** * Character device driver**...

MySQL 5.7 installation and configuration tutorial

This article shares the MySQL installation and co...

Introduction to the use of alt and title attributes of HTML img tags

When browser vendors bend the standards and take i...

A brief discussion on which fields in Mysql are suitable for indexing

Table of contents 1 The common rules for creating...

Detailed explanation of JavaScript timers

Table of contents Brief Introduction setInterval ...

Detailed explanation of the basic use of react-navigation6.x routing library

Table of contents react-native project initializa...

Detailed explanation of routes configuration of Vue-Router

Table of contents introduce Object attributes in ...

MySQL 8.0.12 installation and configuration method graphic tutorial (windows10)

This article records the installation graphic tut...

In-depth explanation of modes and environment variables in Vue CLI

Preface In the development of actual projects, we...