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