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

Monkeycoder · 15.06.2014, 17:33

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

Код в файле index.html:

Код 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 (Прошу прощения, но я не нашел тут тега для подсвечивания css-кода, поэтому вставлю в html):

Код HTML:

header, nav, footer, article {
    display: block;
}
 
footer {
    clear: both;
}

Код в файле style.css:

Код HTML:

* {
  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. Задали сверстать "резиновый" макет. С горем пополам с частью шапки я справился. но оказалось, что меню должно быть еще выпадающим на втором пункте, как на примере. Тут я потерпел фиаско. Заранее спасибо, что уделили свое свободное время решению или просмотру моей проблемы.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Вертикальное выпадающее меню (DLE)	megostudent	HTML и CSS	3	15.12.2012 20:28
Выпадающее меню CSS+HTML	Mat-eria	HTML и CSS	0	17.11.2011 17:29
Выпадающее горизонтальное меню на css	st_sasha	HTML и CSS	1	20.10.2011 16:26
Css-меню вертикальное выпадающее и раскрывающееся при выборе	Landysh86	HTML и CSS	3	04.05.2011 13:25
выпадающее вертикальное меню	ehoolu	HTML и CSS	0	29.09.2010 01:47