Page main part:
<body> <ul id=menu> <li> <a href=#>First Menu1</a> <ul> <li>Second Menu1</li> <li>Second Menu1-1</li> <li>Second Menu1-2</li> <li>Second Menu1-3</li> </ul> </li> <li>Second Menu1-3</li> </li> </li> <li> <a href=#>Second Menu2</a> <ul> <li>Second Menu2-1</li> <li>Second Menu2-2</li> <li>Second Menu2-3</li> </li> </li> <li>Second Menu2-3</a> <ul> <li>Second Menu3</a> <ul> <li>Second Menu3</a> <ul> <li>Second Menu3</a> <ul> <li>Second Menu3</li> <li>Second Menu3</li> </li> <li>Second Menu3</a> <ul> <li>Second Level Menu 4-1</li> <li>Second Level Menu 4-2</li> <li>Second Level Menu 4-3</li> </li> </li> <ul></body>
Folding menu example:
CSS part
<head><style type=text/css>li{ list-style:none; Remove the previous graphics of the list}li a{ color:#123; Set the text color of the first-level menu}#menu ul{ display:none; Set the secondary menu not displayed by default}#menu>li:hover ul{ display:block; When the mouse slides through the first-level menu, the secondary menu will be displayed}</style></head>Accordion menu example:
CSS part
<head><style type=text/css>li{ list-style:none; Remove the previous figure of the list}li a{ color:#123; Set the text color of the first-level menu}#menu>li,#menu>li>a,#menu>li>ul{ float:left; First-level menu, second-level menu left-moving}#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> SummarizeThe above is the example code for implementing the folding menu and accordion menu introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!
If you think this article is helpful to you, please reprint it. Please indicate the source, thank you!