HTML6 implements folding menu and accordion menu example code

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!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!

<<: Using CSS3 to create header animation effects

>>: Web page header optimization suggestions