ВЫПАДАЮЩЕЕ МЕНЮ
Нам необходимо скрыть МЕНЮ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