С этим кодом задание не пройти. Зато это меню реально выпадающее.
CSS
html,
body {
margin: 0;
padding: 0;
}
body {
width: 380px;
min-height: 280px;
padding: 10px;
font-family: "Arial", sans-serif;
font-size: 14px;
line-height: 1.4;
background: #ecf0f1;
}
/*для всех меню*/
.main-menu,
.sub-menu
{
list-style: none; /*отключаем маркеры списка*/
margin: 0; /*обнуляем внешние отступы*/
padding: 0; /*обнуляем внутренние отступы*/
width: 200px; /*ширина*/
}
.main-menu > li {
position: relative; /*для того чтобы спозиционоровать подменю относительно пункта главного меню*/
}
/*общий стиль для всех меню*/
.main-menu a {
display: block; /*делаем блоки-ссылки*/
text-decoration: none; /*убираем подчёркивание у ссылок*/
padding: 10px 15px; /*внутренние - верт 10, гориз 15*/
color: #ffffff; /*красим буквы*/
}
/*стиль главного меню*/
.main-menu > li {
background: #2980b9; /*красим фон*/
border-bottom: 2px solid #2c3e50; /*нижняя рамка*/
}
.main-menu li:hover {
background: #1abc9c; /*цвет фона открытой ветки*/
}
.sub-menu {
display: none;
position: absolute; /*отделяем подменю*/
z-index: 10; /*высодим на передний план*/
top: 0; /*верхняя позиция относительно активного пункта меню*/
left: 180px; /*позиция слева*/
background: #1abc9c;
}
.sub-menu li {
border-bottom: 2px solid #2ecc71; /*нижняя рамка подменю*/
}
.main-menu li:hover .sub-menu {
display: block;
}
.main-menu .sub-menu a:hover {
background: #2ecc71;
}
/* -=- ЦВЕТА -=-
#ffffff - белый
#2980b9 - синий
#2c3e50 - тёмно-синий
#1abc9c - зелёный
#2ecc71 - светло-зелёный
*/