Слегка поджаренный

Русь размещены статьи на тему "Вложенные списки используются для создания простых папку metaphore". Мысль я бы применить тот же знак меры и изменить CSS для создания левой рукой навигации для повторного назначения и повторно использовать один и тот же код. Поэтому здесь выходит. "Конечно, я бы ожидать, нужно изменить размер пикселя на EM, и делать все это относительное. CSS также можно упорядочить немного дальше.

HTML

<ul id="sitemap">
<li> <a href="#"> пункта 1 </ A> </ Li>
<li> <a href="#"> пункта 2 </ A> </ Li>
<li> <a href="#"> пункта 3 </ A> </ Li>
<li> <a href="#" class="open"> пункта 4 </ A>

<ul>
<li> <a href="#"> подпункта 1 </ A> </ Li>
<li> <a href="#"> подпункта 2 </ A> </ Li>
<li> <a href="#" class="open"> подпункта 3 </ A>

<ul>
<li> <a href="#"> югу от подпункт 1 </ A> </ Li>
<li> <a href="#"> югу от подпункта 2 </ A> </ Li>
<li> <a href="#" class="open"> югу от подпункту 3 </ A>

<ul>
<li> <a href="#"> югу от югу от подпункт 1 </ A> </ Li>
<li> <a href="#"> югу от к югу от подпункта 2 </ A> </ Li>
<li> <a href="#"> югу-Sub-подпункту 3 </ A> </ Li>
<li> <a href="#"> югу-Sub-подпункту 4 </ A> </ Li>
</ UL>

</ Li>

<li> <a href="#"> югу от подпункту 4 </ A> </ Li>
</ UL>
</ Li>

<li> <a href="#"> подпункту 4 </ A> </ Li>
</ UL>
</ Li>

<li> <a href="#"> пункта 5 </ A> </ Li>
<li> <a href="#"> пункта 6 </ A> </ Li>
</ UL>

CSS

ул # (Sitemap
границе: нет;
Маржа: 0;
Список стиле типа: нет;
-цвет фона: # FFF;
обивка: 0;
ширина: 175px;
шрифт: нормальный 93% Verdana, без-Serif;
пограничного право: 1px твердого # f3f1ed;
Цвет: # 333;
поплавок: слева;
Маржа: 0 0 1em 0;
)

ул # (Sitemap ли разница-дно: 0;)

ул # Sitemap Li (
Справочная информация: URL (arrow_black_r.gif) право не повторить # DFDBD5;
Цвет: # 000;
начертание шрифта: жирный;
Дисплей: блок;
обивка: 7px 7px 7px 0.5em;
Текст-отделка: нет;
Ширина: авто;
)

ул # Sitemap Ли a.open (
Справочная информация: # f3f1ed URL (arrow_brown_d.gif) не повторять право;
Цвет: # 6a2b04;
начертание шрифта: жирный;
)

ул # Sitemap Ли Ли a.open (
Справочная информация: # e3e0db URL (arrow_brown_d.gif) не повторять право;
Цвет: # 6a2b04;
начертание шрифта: жирный;
)

ул # Sitemap Ли Ли Ли a.open (
Справочная информация: # dfdbd5 URL (arrow_brown_d.gif) не повторять право;
Цвет: # 6a2b04;
начертание шрифта: жирный;
)

ул # Sitemap Ли Ли Ли Ли a.open (
Справочная информация: # dfdbd5 адрес (arrow_brown_d.gif) не повторять право;
Цвет: # 6a2b04;
начертание шрифта: жирный;
)

/ * Второй уровень * /

ул # Sitemap ул (
Маржа: 0 0 0 0;
обивка: 0;
Список стиле типа: нет;
)

ул # Sitemap Ли Ли (фон: URL (dot2.gif) не повторять;)

ул # Sitemap Ли Ли (
Справочная информация: URL (arrow_or_r.gif) 5px не повторить # F3F1ED;
Цвет: # 000;
начертание шрифта: обычный;
Дисплей: блок;
обивка: 7px 7px 7px 1.3em;
Текст-отделка: нет;
Ширина: авто;
)

/ * Третьего уровня * /

ул # Sitemap уль уль (
Справочная информация: URL (dot.gif) повторяю-Y 30px 0;
)

ул # Sitemap Ли Ли Ли (
Справочная информация: URL (dot2.gif) не повторять 30px .5 EM;
)

ул # Sitemap Ли Ли Ли (
обивка: .5 EM 0 .5 EM 2.5em;
Справочная информация: URL (arrow_or_r.gif) 18px не повторить # F3F1ED;
)

/ * Четвертого уровня * /

ул # Sitemap уль уль уль (
Справочная информация: URL (dot.gif) повторяю-Y 60px 0;
)
ул # Sitemap Ли Ли Ли Ли (
Справочная информация: URL (dot2.gif) не повторять 60px 0;
)
ул # Sitemap Ли Ли Ли Ли (
обивка: .5 EM 0 .5 EM 3.5em;
Справочная информация: URL (arrow_or_r.gif) 31px не повторить # F3F1ED;
)
: ссылки (
Цвет: # 000;
-цвет фона: прозрачный;
)
: наведите (
Цвет: # b64908;
)