ページの主な部分：
<body> <ul id = menu> <li> <a href =＃> first menu1 </a> <ul> <li> 2番目のメニュー1 </li> <li> 2番目のメニュー1 </li> <li> 2番目のメニュー1-3 </li> </ul> </li> <li> 2番目のメニューメニュー2 </a> <ul> <li>セカンドメニュー2-1 </li> <li>セカンドメニュー22-2 </li> <li>セカンドメニュー2-3 </li> </li> </li> <li>セカンドメニュー3 </a> <ul> <li>セカンドメニュー3 </a> <ul> <li>セカンドメニュー3 <li> 2番目のメニュー3 </li> </li> <li>セカンドメニュー3 </a> <ul> <li>セカンドレベルメニュー4-1 </li> <li>セカンドレベルメニュー4-2 </li> <li>セカンドレベルメニュー4-3 </li> </li> </li> <ul> </body>
折りたたみメニューの例：
CSSパーツ
<head> <style type = text/css> li {list-style：none;リストの以前のグラフィックを削除} li a {color：＃123;最初のレベルのメニューのテキスト色を設定します} #menu ul {display：none;デフォルトで表示されないセカンダリメニューを設定} #menu> li：hover ul {display：block;マウスが最初のレベルのメニューをスライドすると、セカンダリメニューが表示されます} </style> </head>アコーディオンメニューの例：
CSSパーツ
<head> <style type = text/css> li {list-style：none;リストの前の図を削除} li a {color：＃123;最初のレベルのメニューのテキスト色を設定します} #menu> li、＃menu> li> a、＃menu> li> ul {float：left;第1レベルのメニュー、セカンドレベルのメニュー左移動} #menu> li> a {display：block;背景色;赤; } #menu> li：hover ul {display：block;}＃menu> ul {display：none;幅：100px;バックグラウンドカラー：＃123;パディングトップ：20px;} </style> </head>要約します上記は、編集者が紹介した折りたたみメニューとアコーディオンメニューを実装するためのコードの例です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！
この記事が役立つと思われる場合は、再版してください。ソースを示してください、ありがとう！