Jump to content

Pendalf

Neophyte
  • Posts

    1
  • Joined

  • Last visited

Everything posted by Pendalf

  1. Доброго времени суток, уважаемые форумчане! Столкнулся с одной проблемой: не могу грамотно создать вертикальное выпадающее меню (см. прикрепленную картинку), даже с костылями и то не получается, помогите, пожалуйста. Код файла 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
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy