Добрый день, уважаемые форумчане. Подскажите с менюшечкой, пожалуйста. Хочу сделать 3х уровневое меню, но что то не получается немного.
Строение меню вот такое:
<li>
<a href="#" title="Вернуться на главную страницу">Главная</a>
</li>
<li>
<a href="#" title="Информация о компании">О нас</a>
<ul>
<li><a href="#">Новости</a></li>
<li><a href="#">Акции</a></li>
<li><a href="#">Партнеры</a></li>
<li><a href="#">Вопросы и ответы</a></li>
<li><a href="#">Отзывы</a></li>
</ul>
</li>
<li>
<a href="#">Каталог</a>
<ul>
<li><a href="#">Дома</a></li>
<ul>
<li><a href="#">Дома из оцилиндрованного бревна</a></li>
<li><a href="#">Дома из профилированного бруса</a></li>
</ul>
<li><a href="#">Дачи</a></li>
<ul>
<li><a href="#">Дачи из оцилиндрованного бревна</a></li>
<li><a href="#">Дачи из профилированного бруса</a></li>
</ul>
<li><a href="#">Бани</a></li>
<ul>
<li><a href="#">Бани из оцилиндрованного бревна</a></li>
<li><a href="#">Бани из профилированного бруса</a></li>
<li><a href="#">Гостиницы</a></li>
<li><a href="#">Кафе</a></li>
<li><a href="#">Садовые постройки</a></li>
<li><a href="#">Индивидуальные проекты</a></li>
</ul>
</ul>
</li>
<li>
<a href="#">Достройка и реконструкция</a>
<ul>
<li><a href="#">Пристройки</a></li>
<ul>
<li><a href="#">Пристройки к строениям</a></li>
<li><a href="#">Достройка мансардры в частном доме</a></li>
</ul>
<li><a href="#">Достройка домов</a></li>
<ul>
<li><a href="#">Завершение строительства</a></li>
<li><a href="#">Строительство крыш для деревянных домов</a></li>
<li><a href="#">Объеденение строений</a></li>
<li><a href="#">Достройка веранды в часном доме</a></li>
<li><a href="#">Устройство отмостки</a></li>
</ul>
<li><a href="#">Ремонт дачного дома</a></li>
<ul>
<li><a href="#">Замена и ремонт кровли дачных домов</a></li>
<li><a href="#">Утепление деревянного дома</a></li>
<li><a href="#">Внешняя отделка дачного дома</a></li>
<li><a href="#">Внутренняя отделка дачного дома под ключ</a></li>
<li><a href="#">Внутренняя перепланировка помещений</a></li>
<li><a href="#">Сайдинг</a></li>
<li><a href="#">Отделка цоколя сайдингом</a></li>
<li><a href="#">Отделка стен сайдингом</a></li>
<li><a href="#">Отделка фундамента сайдингом</a></li>
<li><a href="#">Отделка бани</a></li>
</ul>
</ul>
</li>
<li>
<a href="#">Услуги</a>
<ul>
<li><a href="#">Устройство инженерных коммуникаций</a></li>
<ul>
<li><a href="#">Электромонтажные работы</a></li>
<li><a href="#">Отопление</a></li>
<li><a href="#">Водоснабжение</a></li>
<li><a href="#">Горячее водоснабжение</a></li>
<li><a href="#">Вентиляция туалета</a></li>
<li><a href="#">Монтаж системы водоснабжения</a></li>
<li><a href="#">Автономное водоснабжение</a></li>
<li><a href="#">Водоснабжение от скважины загородного дома и коттеджа</a></li>
<li><a href="#">Оборудование для водоснабжения</a></li>
<li><a href="#">Водоподъем из колодца</a></li>
<li><a href="#">Канализация</a></li>
<li><a href="#">Вентиляция</a></li>
</ul>
<li><a href="#">Устройство фундаментов</a></li>
<ul>
<li><a href="#">Ленточный</a></li>
<li><a href="#">Столбчатый</a></li>
<li><a href="#">Монолитный</a></li>
<li><a href="#">Свайный</a></li>
<li><a href="#">Мелкозаглубленный</a></li>
<li><a href="#">Плитный</a></li>
<li><a href="#">Плавающий</a></li>
<li><a href="#">Винтовой</a></li>
</ul>
<li><a href="#">Виды кровли</a></li>
<ul>
<li><a href="#">Шифер</a></li>
<li><a href="#">Ондулин</a></li>
<li><a href="#">Черепица</a></li>
<li><a href="#">Металлочерепица</a></li>
<li><a href="#">Гибкая черепица</a></li>
<li><a href="#">Профнастил</a></li>
<li><a href="#">Деревянная черепица</a></li>
<li><a href="#">Мягкая черепица</a></li>
<li><a href="#">Керамическая черепица</a></li>
<li><a href="#">Композитная кровля</a></li>
<li><a href="#">Полимерная</a></li>
</ul>
</ul>
</li>
<li>
<a href="#">Строительство и производство</a>
<ul>
<li><a href="#">Технологии</a></li>
<ul>
<li><a href="#">Сборка домов из бруса</a></li>
<li><a href="#">Сборка домов из оцилиндрованного бревна</a></li>
<li><a href="#">Сборка домов из профилированного бруса</a></li>
</ul>
<li><a href="#">Производство</a></li>
<ul>
<li><a href="#">Заготовка древесины/a></li>
<li><a href="#">Производство пиломатериалов</a></li>
<li><a href="#">Склады</a></li>
<li><a href="#">Площадка контрольной сборки</a></li>
</ul>
<li><a href="#">Условия строительства</a></li>
<ul>
<li><a href="#">Цены на строительство</a></li>
<li><a href="#">Заключение договора, доставка и подготовка участка</a></li>
<li><a href="#">Условия работы бригад</a></li>
<li><a href="#">Приемка работ и гарантия</a></li>
</ul>
</ul>
</li>
<li>
<a href="#">Примеры домов</a>
</li>
<li>
<a href="#">Контакты</a>
</li>
<li>
<a href="#">Выберите город</a>
<ul>
<li><a href="#">Россия</a></li>
<ul>
<li><a href="#">Астрахань</a></li>
<li><a href="#">Барнаул</a></li>
<li><a href="#">Белгород</a></li>
<li><a href="#">Белоярский</a></li>
<li><a href="#">Брянск</a></li>
<li><a href="#">Владиковказ</a></li>
<li><a href="#">Волгоград</a></li>
<li><a href="#">Волжский</a></li>
<li><a href="#">Вологда</a></li>
<li><a href="#">Воронеж</a></li>
<li><a href="#">Грозный</a></li>
<li><a href="#">Губкинский</a></li>
<li><a href="#">Дзержинск</a></li>
<li><a href="#">Екатеринбург</a></li>
<li><a href="#">Иваново</a></li>
<li><a href="#">Ижевск</a></li>
<li><a href="#">Йошкар-Ола</a></li>
<li><a href="#">Казань</a></li>
<li><a href="#">Калининград</a></li>
<li><a href="#">Калуга</a></li>
<li><a href="#">Когалым</a></li>
<li><a href="#">Кострома</a></li>
<li><a href="#">Краснодар</a></li>
<li><a href="#">Курган</a></li>
<li><a href="#">Курск</a></li>
<li><a href="#">Лабытнаги</a></li>
<li><a href="#">Лангепас</a></li>
<li><a href="#">Липецк</a></li>
<li><a href="#">Лянтор</a></li>
<li><a href="#">Магнитогорск</a></li>
<li><a href="#">Махачкала</a></li>
<li><a href="#">Мегион</a></li>
<li><a href="#">Муравленко</a></li>
<li><a href="#">Набережные челны</a></li>
<li><a href="#">Надым</a></li>
<li><a href="#">Нальчик</a></li>
<li><a href="#">Нефтеюганск</a></li>
<li><a href="#">Нижневартовск</a></li>
<li><a href="#">Нижний Тагил</a></li>
<li><a href="#">Новороссийск</a></li>
<li><a href="#">Новый Уренгой</a></li>
<li><a href="#">Ноябрьск</a></li>
<li><a href="#">Нягань</a></li>
<li><a href="#">Омск</a></li>
<li><a href="#">Орел</a></li>
<li><a href="#">Оренбург</a></li>
<li><a href="#">Орск</a></li>
<li><a href="#">Пенза</a></li>
<li><a href="#">Пермь</a></li>
<li><a href="#">Покачи</a></li>
<li><a href="#">Пыть-Ях</a></li>
<li><a href="#">Радужный</a></li>
<li><a href="#">Ростов-на-Дону</a></li>
<li><a href="#">Рязань</a></li>
<li><a href="#">Саленхард</a></li>
<li><a href="#">Самара</a></li>
<li><a href="#">Саранск</a></li>
<li><a href="#">Саратов</a></li>
<li><a href="#">Севастополь</a></li>
<li><a href="#">Симферополь</a></li>
<li><a href="#">Смоленск</a></li>
<li><a href="#">Советский</a></li>
<li><a href="#">Сочи</a></li>
<li><a href="#">Ставрополь</a></li>
<li><a href="#">Стерлитамак</a></li>
<li><a href="#">Сургут</a></li>
<li><a href="#">Таганрог</a></li>
<li><a href="#">Тарко-Сале</a></li>
<li><a href="#">Тверь</a></li>
<li><a href="#">Тольятти</a></li>
<li><a href="#">Тула</a></li>
<li><a href="#">Тюмень</a></li>
<li><a href="#">Ульяновск</a></li>
<li><a href="#">Урай</a></li>
<li><a href="#">Уфа</a></li>
<li><a href="#">Ханты-Мансийск</a></li>
<li><a href="#">Чебоксары</a></li>
<li><a href="#">Челябинск</a></li>
<li><a href="#">Череповец</a></li>
<li><a href="#">Шахты</a></li>
<li><a href="#">Югорск</a></li>
<li><a href="#">Ярославль</a></li>
</ul>
<li><a href="#">Казахстан</a></li>
<ul>
<li><a href="#">Актау</a></li>
<li><a href="#">Актобе</a></li>
<li><a href="#">Алма-Ата</a></li>
<li><a href="#">Астана</a></li>
<li><a href="#">Атырау</a></li>
<li><a href="#">Караганда</a></li>
<li><a href="#">Кокшетау</a></li>
<li><a href="#">Костанай</a></li>
<li><a href="#">Кызылорда</a></li>
<li><a href="#">Павлодар</a></li>
<li><a href="#">Петропаловск</a></li>
<li><a href="#">Рудный</a></li>
<li><a href="#">Семей</a></li>
<li><a href="#">Талдыкорган</a></li>
<li><a href="#">Тараз</a></li>
<li><a href="#">Темиртау</a></li>
<li><a href="#">Туркестан</a></li>
<li><a href="#">Уральск</a></li>
<li><a href="#">Усть-Каменогорск</a></li>
<li><a href="#">Шымкент</a></li>
<li><a href="#">Экибастуз</a></li>
</ul>
<li><a href="#">Киргизия</a></li>
<ul>
<li><a href="#">Балыкчи</a></li>
<li><a href="#">Бишкек</a></li>
<li><a href="#">Джалал-Абад</a></li>
<li><a href="#">Кара-Балта</a></li>
<li><a href="#">Каракол</a></li>
<li><a href="#">Кара-Суу</a></li>
<li><a href="#">Кызыл-Кия</a></li>
<li><a href="#">Нарын</a></li>
<li><a href="#">Ош</a></li>
<li><a href="#">Талас</a></li>
<li><a href="#">Токмок</a></li>
<li><a href="#">Узген</a></li>
</ul>
<li><a href="#">Таджикистан</a></li>
<ul>
<li><a href="#">Вахдат</a></li>
<li><a href="#">Душанбе</a></li>
<li><a href="#">Истаравшан</a></li>
<li><a href="#">Исфара</a></li>
<li><a href="#">Канибадам</a></li>
<li><a href="#">Куляб</a></li>
<li><a href="#">Курган-Тюбе</a></li>
<li><a href="#">Турсунзаде</a></li>
<li><a href="#">Худжанд</a></li>
</ul>
<li><a href="#">Туркменистан</a></li>
<ul>
<li><a href="#">Аннау</a></li>
<li><a href="#">Ашхабад</a></li>
<li><a href="#">Байрамали</a></li>
<li><a href="#">Балканабат</a></li>
<li><a href="#">Дашогуз</a></li>
<li><a href="#">Магданлы</a></li>
<li><a href="#">Мары</a></li>
<li><a href="#">Сердар</a></li>
<li><a href="#">Теджен</a></li>
<li><a href="#">Туркменбашы</a></li>
<li><a href="#">Туркменобат</a></li>
</ul>
<li><a href="#">Узбекистан</a></li>
<ul>
<li><a href="#">Алмалык</a></li>
<li><a href="#">Ангрен</a></li>
<li><a href="#">Андижан</a></li>
<li><a href="#">Бухара</a></li>
<li><a href="#">Джизак</a></li>
<li><a href="#">Карши</a></li>
<li><a href="#">Коканд</a></li>
<li><a href="#">Маргилан</a></li>
<li><a href="#">Навои</a></li>
<li><a href="#">Наманган</a></li>
<li><a href="#">Нукус</a></li>
<li><a href="#">Самарканд</a></li>
<li><a href="#">Ташкент</a></li>
<li><a href="#">Термез</a></li>
<li><a href="#">Ургенч</a></li>
<li><a href="#">Фергана</a></li>
<li><a href="#">Чирчик</a></li>
</ul>
</ul>
</li>
КСС такое:
#nav{
float:left;
width:100%;
list-style:none;
font-weight:bold;
margin-bottom:10px;
}
#nav li{
float:left;
margin-right:10px;
position:relative;
display:block;
}
#nav li a{
display:block;
padding:5px;
color:#fff;
background:#333;
text-decoration:none;
text-shadow:1px 1px 1px rgba(0,0,0,0.75); /* Тень текста, чтобы приподнять его на немного */
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
}
#nav li a:hover{
color:#fff;
background:#6b0c36;
background:rgba(107,12,54,0.75); /* Выглядит полупрозрачным */
text-decoration:underline;
}
#nav ul{
list-style:none;
position:absolute;
left:-9999px; /* Скрываем за экраном, когда не нужно (данный метод лучше, чем display:none;) */
opacity:0; /* Устанавливаем начальное состояние прозрачности */
-webkit-transition:0.25s linear opacity; /* В Webkit выпадающие пункты будут проявляться */
}
#nav ul li{
padding-top:1px; /* Вводим отступ между li чтобы создать иллюзию разделенных пунктов меню */
float:none;
background:url(dot.gif);
}
#nav ul a{
white-space:nowrap; /* Останавливаем перенос текста и создаем многострочный выпадающий пункт */
display:block;
}
#nav li:hover ul{ /* Выводим выпадающий пункт при наведении курсора */
left:0; /* Приносим его обратно на экран, когда нужно */
opacity:1; /* Делаем непрозрачным */
}
#nav li:hover a{ /* Устанавливаем стили для верхнего уровня, когда выводится выпадающий список */
background:#6b0c36;
background:rgba(107,12,54,0.75); /* Выглядит полупрозрачным */
text-decoration:underline;
}
#nav li:hover ul a{ /* Изменяем некоторые стили верхнего уровня при выводе выпадающего пункта */
text-decoration:none;
-webkit-transition:-webkit-transform 0.075s linear;
}
#nav li:hover ul li a:hover{ /* Устанавливаем стили для выпадающих пунктов, когда курсор наводится на конкретный пункт */
background:#333;
background:rgba(51,51,51,0.75); /* Будет полупрозрачным */
text-decoration:underline;
-moz-transform:scale(1.05);
-webkit-transform:scale(1.05);
}
Я так понимаю нужно классы определенные применять к 3м пунктам, но как это сделать я не могу разобраться. Нужно что бы было так: Наводишь на главное меню, открывается список, наводишь на пункты, открывается еще список со страницами.