Главная часть страницы:
<body> <ul id = menu> <li> <a href =#> Первое меню 1 </a> <ul> <li> Второе меню1 </li> <li> Второе меню1-1 </li> <li> Второе меню 1-2 </li> <li> Второе меню1-3 </li> </ul> </li> <li> Второе меню 1-3 </li> </li> </ul> </ul> </li> <li> <li> href =#> Second Menu2 </a> <ul> <li> Второе меню2-1 </li> <li> Второе меню 2-2 </li> <li> Второе меню2-3 </li> </li> </li> <li> Второе меню2-3 </a> <ul> <li> Второе меню 3 </a> <ul> <li> <li> <cul> <li> <ul> <li> Menu3 </a> <ul> <li> Второе меню3 </li> <li> Второе меню3 </li> </li> <li> Второе меню3 </a> <ul> <li> Меню второго уровня 4-1 </li> <li> Меню второго уровня 4-2 </li> <li> Меню второго уровня 4-3 </li> </li> </li> <ul> <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; Меню первого уровня, меню второго уровня левого движения} #menu> li> a {display: block; фоновый цвет; красный; } #menu> li: hover ul {display: block;}#menu> ul {display: none; Ширина: 100px; фоновый цвет:#123; накладная-версия: 20px;} </style> </head> СуммироватьВыше приведен пример кода для реализации меню складывания и меню аккордеона, представленного вам редактором. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!
Если вы думаете, что эта статья полезна для вас, пожалуйста, перепечатайте ее. Пожалуйста, укажите источник, спасибо!