Стилизация вложенных списков в CSS

Question

Я хотел бы построить древовидный интерфейс навигации в чистой разметке (то есть без использования javascript / jquery и т. Д.).

Неупорядоченные списки <ul> кажутся лучшим решением, и я нашел этот учебник на simplebits.com очень близко к нужному мне решению. Однако автор определяет таблицу стилей с предположением, что конечная / максимальная глубина любой ветви уже известна:

#sitemap li ul li ul li {
    padding-left: 16px;
    background: url(bullet.gif) no-repeat 0 50%;
}  

Я хочу знать, есть ли способ разрешить разметке опускаться "бесконечно" и иметь поддержку стилей это без проблем.

Если вам нужно больше разъяснений по этому поводу, пожалуйста, дайте мне знать.

Answer 1

предоставленная вами разметка должна работать для любых других элементов без указания их напрямую.

например:

#sitemap li {} -->level 1 and under
#sitemap li li {}--> level 2 and under (overrides previous rule)
#sitemap li li li {}--> level 3 and under (overrides previous rule)

поэтому последнее правило будет автоматически применяться к уровням 4, 5, 6 и далее.

Если вы не хотите особого стиля для ВСЕХ уровней, тогда у вас все будет хорошо.

Answer 2

Есть учебники по этому вопросу, но есть две проблемы:

1. IE6 не поддерживает: наведите курсор на теги, отличные от якорей, поэтому вам нужно решение Javascript для этого браузера; и
2. На самом деле действительно сложно заставить его работать согласованно во всех основных браузерах.

Рассмотрим альтернативу с использованием jQuery и плагина superfish (вдохновленного suckefish):

<ul class="menu">
  <li>...
</ul>
<script type="text/javascript">
$(function() {
  $("ul.menu").superfish();
});
</script>

Готово.

Если вы идете (полу) чистым маршрутом CSS, я настоятельно рекомендую вам использовать одну из существующих сред для этого (например, suckerfish или производную). В противном случае вы просто потянете свои волосы и потратите много времени, чтобы заставить их работать правильно.

Чтобы ответить на ваш вопрос о глубине: упомянутое вами правило, по сути, уходит в бесконечную глубину. Помните, что пробел в CSS - селектор потомков, а не дочерний селектор. Причина повторных групп заключается в том, что правило применяется только с (скажем) третьего уровня вниз.

Это потому, что на первом и втором уровнях будут специальные стили. Первой будет горизонтальная или вертикальная черта. Второй будет всплывать из этого, но с третьего уровня он будет постоянно появляться таким же образом.

Answer 3

Как насчет присвоения класса неупорядоченным элементам списка?

#sitemap li.tree
{
   padding-left: 16px;
}

Не понимаю, почему это не сработает, но поправьте меня, если я ошибаюсь.