Native JS to implement hover drop-down menu

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

Recommend

mysql startup failure problem and scenario analysis

1. One-stop solution 1. Problem analysis and loca...

Install and configure MySQL under Linux

System: Ubuntu 16.04LTS 1\Download mysql-5.7.18-l...

When installing a virtual machine on Thinkpad VMware, the message "This host supports Intel VT-x, but Intel VT-x is disabled" appears (problem solution)

Today, when I was using VMware to install a new v...

Discussion on CSS style priority and cascading order

In general : [1 important flag] > [4 special fl...

How to deploy nginx with Docker and modify the configuration file

Deploy nginx with docker, it's so simple Just...

jQuery plugin to implement search history

A jQuery plugin every day - to make search histor...

The relationship between web page production and steamed buns (sharing experience)

I slept late yesterday and was awake the whole da...

Solve the problem of Mac Docker x509 certificate

question Recently I needed to log in to a private...

CentOS6.8 Chinese/English environment switching tutorial diagram

1. Introduction People who are not used to Englis...

Docker installation of RocketMQ and solutions to problems encountered during installation

Table of contents Pull the rocketmq image Create ...

CSS automatically intercepts the specified length string and displays the end... Support FF browser

<style type="text/css"> Copy code ...

js to make a simple calculator

This article shares the specific code of making a...

MySQL 8.0.23 free installation version configuration detailed tutorial

The first step is to download the free installati...

Detailed explanation of how to enter and exit the Docker container

1 Start the Docker service First you need to know...

Linux kernel device driver Linux kernel module loading mechanism notes summary

#include <linux/moduleparam.h> 1. Module pa...