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:
|
<<: Build a Docker private warehouse (self-signed method)
>>: How to use the concat function in mysql
Installation environment: CentOS7 64-bit, MySQL5....
Table of contents User Management Create a new us...
When configuring the interface domain name, each ...
Table of contents Preface start Preface The defau...
Friends always ask me how to hide Linux processes...
1. Download Python 3 wget https://www.python.org/...
Vue plugin reports an error: Vue.js is detected o...
There is a new feature that requires capturing a ...
Table of contents 1. Introduction 1. Component da...
Solution: Just set the link's target attribute...
Just like this effect, the method is also very si...
This article uses examples to illustrate the usag...
Table of contents Preface Actual Combat 1. No loc...
MySQL executes SQL through the process of SQL par...
MySQL database basic syntax DDL Operations Create...