В этой статье представлены примеры меню второго уровня, которая использует HTML+CSS для реализации мыши.
Первый из эффекта рисунка:
1. Мышь не выше
2. Поместите мышь в меню первого уровня и расширить вторичное меню
3. Поставьте мышь в вторичное меню
Код:
<html> <Head> <Title> тест меню второго уровня </title> <meta charset = utf-8> <style type = text/css>/*, чтобы сделать меню в середине*/body {padding -top: 100px; ------------------------------------------------------ ------------------------------------------------------ ------------------------------------------------------ --------------------- Уничтожение тегов* / .menudiv a {text-decics: none;} /* set ul and li style* / .men udiv ul, .menudiv li {stist-style: none; float: слева;} /* Установите абсолютное положение меню второго уровня и скрыть* /.menudiv> ul> ul {position: Absolutee; /.menudiv> li> ul> li {float: none;} /* мышь, размещенная в первом меню -Level, отображая вторичное меню* /.menudiv> ul> li: Hover ul {display: block;} /* 1 -Лебание Меню* /. } /* В меню первого уровня, первая левая коробка* /.menudiv> li: первой-кильд> a {граница-нет;} /* В меню первоклассного класса стиль мыши размещен /.menudiv> ul> li> a: hover {color: #f0f; line-height: 36px; color: #456; background-color: #eff; text-align: center: 1px solid ID #CCC; Border-Top: None; Display: Block;} /* In the secondary menu, the first setting of the top bezel* / .menudiv> li> li: first-child> a {border-top : 1px solid #ccc;} /* In the secondary menu, the style of the mouse is placed* / .menudiv> Ul > li> li> a: hover {color: #a4f; -- Конец ----------------------------------------------- ------------------------------------------------------ ------ Body> <! class = menudiv> <ul> <li> <a href =#> Menu One </a> <ul> <li> <a href =#> Два -меню. </a> </li> <a href = #> Вторичное меню </a> </li> <li> <a href =#> Second -Level Menu </a> </li> </ul> </li> <li> <a href =#> Меню два </a> <ul> <li> <a href =#> Second -Level Menu </a> </li> <li> <a href =#> Два -Level Menu </a> </li > </li> <li> <li> <a href =#> меню три </a> <ul> <li> <a href =#> Вторичное меню </a> </li> <a href =# > Вторичное меню </a> </li> <li> <a href =#> Второе меню -Level </a> </li> <li> <a href =#> Вторичное меню </a> </li > <li> <a href =#> Second -Level Menu </a> </li> </ul> </li> <li> <a href =#> меню 4 </a> </li> < a href =#> меню пять </a> <ul> <li> <a href =#> Второе меню </a> </li> <li> <a href =#> Второе меню </a> </ li> <li> <a href =#> ii Меню </a> </li> </ul> </li> </ul> </div> <! ------------- --- -------- Конец -----------> </body> </html>Выше всего содержимое этой статьи.