Pendalf
-
Posts
1 -
Joined
-
Last visited
Pendalf's Achievements
Explorer (1/14)
0
Reputation
-
Доброго времени суток, уважаемые форумчане! Столкнулся с одной проблемой: не могу грамотно создать вертикальное выпадающее меню (см. прикрепленную картинку), даже с костылями и то не получается, помогите, пожалуйста. Код файла index.html: <!DOCTYPE html><html lang="ru" dir="ltr" id="html"> <head> <meta charset="utf-8"> <title>VNA | Главная</title> <link rel="stylesheet" href="css/new_elements.css"> <link rel="stylesheet" href="css/style.css"> <script> document.createElement('header'); document.createElement('nav'); document.createElement('article'); document.createElement('footer'); </script> </head> <body> <header> <a href="index.html"> <img src="img/logo.png" alt="VNA.BY_logo"> </a> <nav> <ul> <li> <a href="#"> О нас </a> </li> <li> <a href="#">Товары и услуги</a> <ul> <li><a href=#>Submenu 1</a></li> <li><a href=#>Submenu 2</a></li> <li><a href=#>Submenu 3</a></li> </ul> </li> <li> <a href="#"> Главная </a> </li> </ul> </nav> </header> <article> <h2>Подул ветер перемен</h2> </article> </body></html> Код из файла new_elements.css: header, nav, footer, article { display: block;} footer { clear: both;}Код из файла style.css: * { padding: 0; margin: 0;} body { background-color: #dadbdb;} header { background-color: #6e91c1; overflow: hidden;} header a img { border: none;} header nav { float: right; min-width: 900px; width: auto;} header nav ul { list-style: none;} header nav ul li { float: right; padding:2% 5%;} header nav ul li:hover { background-color:#607FA9;} header nav ul li a { text-decoration: none; font-family: Arial; color: #ffffff; font-size: 2.6em;} /* ОТСЮДА И НАЧАЛИСЬ ПРОБЛЕМЫ *//* скрываем вложенные пункты меню */ nav ul li ul { visibility: hidden; position: absolute; left: 149px; top: 200px;} /* отображаем вложенное меню при наведении мыши */ nav ul li ul li:hover { position: absolute;} nav ul li:hover ul { visibility: visible;} /* выделяем родительские пункты, при наведении на дочерние */ nav ul li ul li:hover a { color:#4682B4; background:#FAFAD2;}P.S. Задали сверстать "резиновый" макет. С горем пополам с частью шапки я справился. но оказалось, что меню должно быть еще выпадающим на втором пункте, как на примере. Тут я потерпел фиаско. Заранее спасибо, что уделили свое свободное время решению или просмотру моей проблемы. Ссылка на example.jpg: https://www.dropbox.com/s/e0o76ilsl82a5fh/EXAMPLE.jpg