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

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



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

[CSS]
header, nav, footer, article {
display: block;
}

footer {
clear: both;
}
[/CSS]

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

[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;
}
[/CSS]

P.S. Задали сверстать "резиновый" макет. С горем пополам с частью шапки я справился. но оказалось, что меню должно быть еще выпадающим на втором пункте, как на примере. Тут я потерпел фиаско. Заранее спасибо, что уделили свое свободное время решению или просмотру моей проблемы.[attachment=40365:example.jpg][attachment=40365:example.jpg]