Mahdi,
Создать выпадающее меню, совместимое с несколькими браузерами, довольно просто, если вы не слишком усложняете его и имеете приличное понимание типов элементов и модели позиционирования в CSS.Есть несколько стандартных примеров, которые могут сделать это довольно легко для вас.Я постараюсь дать как можно более простой ответ, чтобы вы могли его понять (поскольку мой мозг слишком усложнял его, пока я не провел небольшое исследование).
Ваше меню верхнего уровня
Рекомендуется, чтобы все ваши меню , включая подменю, были элементом ul.Есть несколько причин для этого.
- Естественно, он имеет большинство стилей, которые вам нужны.
- В любом случае, меню - это список опций, поэтому его нельзя растягивать.
- Помогает людям с ограниченными возможностями
- Допускает вложение.
Проблема с ul элементами в том, что у них эти неприятные пули.Кроме того, дети li естественно не текут вместе.Все они появляются в отдельных строках.Итак, у нас есть два варианта исправления li.Мы можем float их, но это может быть довольно неловко.Я не рекомендую это.Или мы можем изменить его тип.Ну, в нем есть еще один блок, так что inline-block идеально подходит для этого.
<!-- the HTML for the menu -->
<ul class="menu">
<li class="submenu"><a href="url">link</a></li>
<li class="submenu"><a href="url">link</a></li>
<li class="submenu"><a href="url">link</a></li>
</ul>
/* The CSS for the menu */
ul.menu {
list-style-type:none; /* Gets rid of the bullets. */
}
li.submenu {
display:inline-block; /* Makes the listitems appear on the same row. */
}
** Ваши подменю **
Теперь, вложенный ul элементы должны быть в элементе списка.Браузеры всегда будут правильно его интерпретировать, если вы поместите выпадающий список ul в li.Теперь нам не нужно объявлять ничего смешного.Просто назовите ваш новый ul так же, как ваше оригинальное меню, например:
<!-- Your new HTML -->
<ul class="menu">
<li class="submenu"><a href="url">link</a>
<ul class="menu">
<li><a href="url">link</a>
<li><a href="url">link</a>
<li><a href="url">link</a>
</ul>
</li>
<li class="submenu"><a href="url">link</a>
<ul class="menu">
<li><a href="url">link</a>
<li><a href="url">link</a>
<li><a href="url">link</a>
</ul>
</li>
<li class="submenu"><a href="url">link</a>
<ul class="menu">
<li><a href="url">link</a>
<li><a href="url">link</a>
<li><a href="url">link</a>
</ul>
</li>
</ul>
/* Your new CSS. Notice nothing has changed. */
ul.menu {
list-style-type:none; /* Gets rid of the bullets. */
}
ul.menu li {
display:inline-block; /* Makes the listitems appear on the same row. */
}
Следующий шаг.Получение выпадающего списка.
Теперь у нас есть кросс-браузерная структура, нам просто нужно настроить пару вещей.Нам нужно сначала заставить меню появляться и исчезать.Поскольку мы хотим, чтобы это происходило только с подменю, мы получаем более конкретное значение:
/* Add this to your CSS. */
li.submenu ul.menu {
display:none; /* Makes the submenu disappear. */
}
li.submenu:hover ul.menu {
display:block; /* Makes the submenu appear. */
}
Теперь, если вы посмотрите, ваше меню появится и исчезнет соответствующим образом.Нет стиля, просто списки для вас.Работает одинаково во всех браузерах ... о, подождите!IE делает это больше.Ну, это простая проблема.Видите ли, IE интерпретирует отступы по-другому, чем другие.Давайте сделаем это без проблем:
/* Add this to your CSS. */
menu * {
padding:0; /* Width problem solved. */
}
Теперь, еще одна проблема ... ваши подменю горизонтальны.Причина в том, что мы сказали, что это должно быть в нашем оригинале.
ul.menu li {
display:inline-block; /* Makes the listitems appear on the same row. */
}
Мы можем исправить это, если быть более конкретным.
/* Add this to your CSS. */
li.submenu ul.menu li {
display:block;
}
Теперь это вертикально!Протестируйте это в любом крупном браузере, и вы увидите, что это единственные компоненты, необходимые для раскрывающегося меню в разных браузерах.
Окончательный HTML-код для меню
<ul class="menu">
<li class="submenu"><a href="url">link</a>
<ul class="menu">
<li><a href="url">link</a>
<li><a href="url">link</a>
<li><a href="url">link</a>
</ul>
</li>
<li class="submenu"><a href="url">link</a>
<ul class="menu">
<li><a href="url">link</a>
<li><a href="url">link</a>
<li><a href="url">link</a>
</ul>
</li>
<li class="submenu"><a href="url">link</a>
<ul class="menu">
<li><a href="url">link</a>
<li><a href="url">link</a>
<li><a href="url">link</a>
</ul>
</li>
</ul>
Окончательный CSS для меню
menu * {
padding:0; /* Width problem solved. */
}
ul.menu {
list-style-type:none; /* Gets rid of the bullets. */
}
li.submenu {
display:inline-block; /* Makes the listitems appear on the same row. */
}
li.submenu ul.menu {
display:none; /* Makes the submenu disappear. */
}
li.submenu:hover ul.menu {
display:block; /* Makes the submenu appear. */
}
li.submenu ul.menu li {
display:block;
}
Это решение не требует забавных объявлений позиционирования или ширины.
Надеюсь, это поможет!
FuzzicalLogic