Карта сайта
Sape. Хитрости. Тонкости.
Индексация в yandex.
Иконка сайта favicon.ico
title тэг
CSS3 Закругленные углы
CSS3 Тени(shadow)
Выпадающее меню на CSS
Динамическое меню на PHP
header
Динамическое простое меню на PHP
Динамическое выпадающее меню на PHP и CSS
Динамическое выпадающее меню на PHP и CSS
Динамическое выпадающее меню на PHP и CSS3
Динамическое выпадающее меню на PHP и CSS3
Динамическое выпадающее меню на PHP
СкринШот phpDesigner

ВЫПАДАЮЩЕЕ МЕНЮ

  
Нам необходимо скрыть МЕНЮ2 и МЕНЮ3. Изначально они не должны быть видимы. Видимыми они становятся,
только при наведении на вышестоящий пункт меню.
МЕНЮ2 у нас это .menu_v ul li ul
спрячем его. для этого в стилях пропишем
.menu_v ul li ul
{ display: none;}
т.е. не будет этот пункт меню отображаться.





Вот. мы спрятали МЕНЮ2. Теперь нам надо при наведении мышкой на МЕНЮ1(.menu_v ul li:hover) 
изменить стиль .menu_v ul li ul
Делается это оч. и оч. легко. всего 1 строкой.
.menu_v ul li:hover ul
{
    display: block;
}
ну ладно. 4 строки. но это для удобство будущих правок и читабельности.
Давайте глянем что у нас получилось.
.




Великолепно. При наведении на МЕНЮ1 у нас выскакивают МЕНЮ2 и МЕНЮ3,
но нам бы хотелось чтобы выскакивало только МЕНЮ2, а МЕНЮ3 появлялось при наведении на МЕНЮ2.
Это уже вообще не проблема. Лишь бы не запутаться в иерархии наследований классов.
строка МЕНЮ3 у нас это(подглядываем вверх страницы) .menu_v ul li ul li ul li
строка МЕНЮ2 у нас это(подглядываем вверх страницы) .menu_v ul li ul li 
следовательно в наш css надо скрыть строку МЕНЮ3
.menu_v ul li ul li ul li
        {
            display: none;
        }
И при наведении мышкой на МЕНЮ2 поменять свойство строки МЕНЮ3
.menu_v ul li ul li:hover ul li
{
    display: block;
}
смотрим что получилось.





Ну что ж. Полноценное выпадающее меню получилось. Осталось только слегка подвигать МЕНЮ2 и МЕНЮ3,
чтобы они выскакивал друг под другом. путем добавления в классы МЕНЮ2 и МЕНЮ3 строк 
margin-top: -4px; margin-left:-35px; width: 100px; для МЕНЮ2
margin-top: -4px; margin-left:-30px; width: 100px; для МЕНЮ3 





Или даже рядом
margin-top:-30px; margin-left:55px; width: 100px; для МЕНЮ2
margin-top:-30px; margin-left:50px; width: 100px; для МЕНЮ3