Финал [28/28] - 200% (анимированное)

С этим кодом задание не пройти. Зато это меню реально выпадающее.

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 - светло-зелёный
*/

Анимированное было бы с transition.
Добавьте строку display: block; чтобы зафиксировать подменю в выпавшем состоянии.
P.S. Не дублируйте темы, ведь различия в коде минимальны, и уточнение о выпадающем меню вы могли написать там.

1 лайк