Native JS to implement hover drop-down menu

JS implements a hover drop-down menu. This is a scenario question encountered in front-end interviews. The principle is to modify the attribute value of the display attribute of the menu style from none=>block. The specific implementation is shown below. Focus on the following parts.

Set float for each section.
Set inheritable properties on the section parent box, font-related properties.
When setting the hover, hover on the section parent box, and the background of the child element head will change. You can also hover directly on the head class, writing `.head:hover`. But there will be a problem that when the mouse hovers over li, the head will return to its original appearance, so it is recommended to put hover on section.
However, the menu can only be displayed by hovering over the parent box section, because it is not displayed itself (it cannot be hovered over the head, because the head is not a parent box).

<!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>Hover drop-down menu</title>
    <style>
 
        /* Remove existing styles if necessary for wildcards, a, and li*/
        
        * {
            margin: 0;
            padding: 0;
        }
        
        a {
            text-decoration: none;
            color: black;
        }
 
        /* li here only removes the existing style without specifying the width*/
        
        li {
            list-style: none;
        }
 
        /* Flex layout of each section as an item */
        
        .container {
            margin: 50px auto;
            width: 40%;
            height: 40px;
            display: flex;
            /* space-evenly first seen*/
            justify-content: space-evenly;
            background-color: skyblue;
        }
 
        /* Floating only needs to be done in each section*/
        /* Set "font size, text alignment and line height" for section => inheritable properties*/
        
        .section {
            float: left;
            font-size: 16px;
            line-height: 40px;
            text-align: center;
        }
 
        /*Here specifies the style of the head when hovering*/
        /* Can also be written as .head:hover */
 
        .section:hover .head {
            color: white;
            background-color: orange;
        }
 
        /* The entire menu is invisible at first and the style is set*/
        
        .menu {
            display: none;
            background-color: transparent;
        }
 
        /* You can see the menu after hovering. You can only hover the parent box*/
        
        .section:hover .menu {
            display: block;
        }
 
        /* Specifies the style of li when hovering*/
        
        .menu li:hover {
            background-color: orange;
        }
    </style>
</head>
 
<body>
    <div class="container">
        <div class="section">
            <a href="#" class="head">Write a paper</a>
            <ul class="menu">
                <li>Search for information</li>
                <li>Take notes</li>
                <li>Reproduce</li>
            </ul>
        </div>
        <div class="section">
            <a href="#" class="head">Learn front-end</a>
            <ul class="menu">
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
                <li>LeetCode</li>
            </ul>
        </div>
        <div class="section">
            <a href="#" class="head">Little Days</a>
            <ul class="menu">
                <li>Eat</li>
                <li>Sleep</li>
                <li>Play Beans</li>
            </ul>
        </div>
    </div>
</body>
 
</html>

The final effect is as follows.

Tips: There is another similar question which is to implement a drop-down menu by clicking. The difference here is that you need to add a click event, write it in JS, and then supplement it later. You can also choose to write the three sections in the form of ul li, so that nested two layers of ul can also be achieved, with better semantics, left for readers' reference.

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:

JavaScript drop-down menu implementation code
css+js drop-down menu
js dynamically sets the default selected item in the select drop-down menu
JS implementation code for the three-level drop-down menu
A js implementation code for a date drop-down menu
JS real multi-level linkage drop-down menu class, easily realize the linkage menu of provinces, cities and districts!
Js click pop-up drop-down menu effect example
Javascript imitates Sina game channel to display submenu effect when mouse hovers
JavaScript mouse hover event usage analysis
CSS or JS to display another element when the mouse is hovering

<<: Problems and solutions for installing Docker on Alibaba Cloud

>>: Detailed steps to install the NERDTree plugin in Vim on Ubuntu

Native JS to implement hover drop-down menu

Horizontal header menu implemented with CSS3

Linux kernel device driver kernel linked list usage notes

CSS implements various loading effects with parsing process

JavaScript array merging case study

Implementation of adding remark information to mysql

How to remove the underline of a hyperlink using three simple examples

Linux CentOS6.5 yum install mysql5.6

Teach you how to use AWS server resources for free

In-depth analysis of the diff algorithm in React

Two ways to start Linux boot service

Recommend

Example code for implementing background transparency and opaque text with CSS3

Detailed explanation of the adaptive adaptation problem of Vue mobile terminal

MySQL foreign key setting method example

Summary of the use of three for loop statements in JavaScript (for, for...in, for...of)

Examples of implementing progress bars and order progress bars using CSS

js handles account logout when closing the browser

MySql sharing of null function usage

About the problem of writing plugins for mounting DOM in vue3

Tutorial diagram of installing MySQL service through MySQL Installer under Windows

A brief summary of vue keep-alive

Implementing long shadow of text in less in CSS3

Writing a web calculator using javascript

Three ways to avoid duplicate insertion of data in MySql

Solve the problem of inconsistent MySQL storage time

CSS uses position + margin to achieve the method of horizontal and vertical centering of fixed boxes