Вертикальное выпадающее меню при помощи CSS

Pendalf · June 16, 2014

Доброго времени суток, уважаемые форумчане! Столкнулся с одной проблемой: не могу грамотно создать вертикальное выпадающее меню (см. прикрепленную картинку), даже с костылями и то не получается, помогите, пожалуйста.

Код файла 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

MichaelD · June 16, 2014

http://jsfiddle.net/JPu4m/ самое простенькое выпадающие меню с использованием JQ.

На чистом css надо просто удалить скрипт и написать:

#nav li:hover ul{

display: block;

}

Edited June 16, 2014 by MichaelD

Sign In

Вертикальное выпадающее меню при помощи CSS

Question

Pendalf

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

MichaelD

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information