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 5.7 installation and configuration tutorial under CentOS7 (YUM)

Installation environment: CentOS7 64-bit, MySQL5....

Detailed tutorial on how to create a user in mysql and grant user permissions

Table of contents User Management Create a new us...

Nginx operation and maintenance domain name verification method example

When configuring the interface domain name, each ...

How to modify the ssh port number in Centos8 environment

Table of contents Preface start Preface The defau...

One line of code teaches you how to hide Linux processes

Friends always ask me how to hide Linux processes...

Detailed steps to install python3.7 on CentOS6.5

1. Download Python 3 wget https://www.python.org/...

Vue plugin error: Vue.js is detected on this page. Problem solved

Vue plugin reports an error: Vue.js is detected o...

Solution to HTML2 canvas SVG not being recognized

There is a new feature that requires capturing a ...

WeChat applet component development: Visual movie seat selection function

Table of contents 1. Introduction 1. Component da...

How to open a page in an iframe

Solution: Just set the link's target attribute...

How to display small icons in the browser title bar of HTML webpage

Just like this effect, the method is also very si...

Simple usage examples of MySQL custom functions

This article uses examples to illustrate the usag...

MySQL pessimistic locking and optimistic locking implementation

Table of contents Preface Actual Combat 1. No loc...

Overview of MySQL Statistics

MySQL executes SQL through the process of SQL par...

MySQL database basic syntax and operation

MySQL database basic syntax DDL Operations Create...