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
I just bought an Alibaba Cloud host and couldn’t ...
This is my first time writing a blog. I have been...
Table of contents introduce Link start Continue t...
I have seen many relevant tutorials on the Intern...
There are two most commonly used methods to insert...
Web front end 1 Student ID Name gender age 01 Zha...
zabbix_agent deployment: Recommendation: zabbix_a...
As a tester, you may often need to install some s...
In order to make the table fill the screen (the re...
Table of contents Setting up a basic HTTP request...
1. Always close HTML tags In the source code of p...
This article example shares the specific code of ...
This post focuses on a super secret Flutter proje...
This article mainly records the problems and solu...
Prepare a CentOS6 installation disk (any version)...