The main part of the page: <body> <ul id="menu"> <li> <a href="#">First level menu 1</a> <ul> <li>Secondary Menu 1-1</li> <li>Secondary Menu 1-2</li> <li>Secondary Menu 1-3</li> </ul> </li> <li> <a href="#">First Level Menu 2</a> <ul> <li>Secondary Menu 2-1</li> <li>Secondary Menu 2-2</li> <li>Secondary Menu 2-3</li> </ul> </li> <li> <a href="#">First level menu 3</a> <ul> <li>Secondary Menu 3-1</li> <li>Secondary Menu 3-2</li> <li>Secondary Menu 3-3</li> </ul> </li> <li> <a href="#">First level menu 4</a> <ul> <li>Secondary Menu 4-1</li> <li>Secondary Menu 4-2</li> <li>Secondary Menu 4-3</li> </ul> </li> <ul> </body> Folding menu example: CSS part <head> <style type="text/css"> li{ list-style:none; remove the graphics in front of the list} li a{ color:#123; Set the first level menu text color} #menu ul{ display:none; Set the secondary menu not to be displayed by default} #menu>li:hover ul{ display:block; When the mouse moves over the first-level menu, the second-level menu is displayed} </style> </head> Accordion menu example: CSS part <head> <style type="text/css"> li{ list-style:none; remove the graphics in front of the list} li a{ color:#123; Set the first level menu text color} #menu>li,#menu>li>a,#menu>li>ul{ float:left; first level menu, second level menu moves left} #menu>li>a{ display:block; background-color;red; } #menu>li:hover ul{ display:block; } #menu>ul{ display:none; width:100px; background-color:#123 ; padding-top:20px; } </style> </head> Summarize The above is the example code of HTML6 implementing folding menu and accordion menu introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website! |
<<: Using CSS3 to create header animation effects
>>: Web page header optimization suggestions
This time we set up an rtmp live broadcast server...
I have been in contact with PHP for so long, but ...
Container auto-start Docker provides a restart po...
The first one : Copy code The code is as follows: ...
1. What is the hyperlink icon specification ?<...
MySQL multi-table query Add a worksheet -- User t...
Table of contents Preface optimization Extract va...
Recently, the project switched the environment an...
This article shares the specific code of JavaScri...
Table of contents 1. What is a trigger? 2. Create...
From getting started to becoming a novice, the Li...
VMware Tools is a tool that comes with VMware vir...
Preface: This article is based on the experience ...
I just started learning about databases recently....
This article example shares the specific code of ...