28/28 Мне кажется очень красивый код получился 😌 [100%]

Курсы §13. Мастерская: создаём меню
1 
.main-menu {
    width:200px;
    margin:0;
    padding:0;
}
.main-menu a {
    display:block;
    padding:10px 15px;
    text-decoration:none;
    color:#ffffff;
    background:#2980b9;
    border-bottom:2px solid #2c3e50;
}
.main-menu .opened a {
    background:#1abc9c;
}
.main-menu > li {position: relative;}
.main-menu .sub-menu {
    position:absolute;
    z-index:1;
    top:0;
    left:180px;
    width:200px;
    margin:0;
    padding:0;
    list-style:none;
}
.main-menu .sub-menu a {
    background-color:#1abc9c;
    border-bottom:2px solid #2ecc71;
}
1 лайк
2

Красивый) А если еще вот эти строчки сгруппировать для .main-menu и .sub-menu, то будет еще красивее)

1 лайк
3

Весьма!

.main-menu,
.sub-menu {
    width:200px;
    margin:0;
    padding:0;
    list-style: none;
}
.main-menu a {
    display:block;
    padding:10px 15px;
    text-decoration:none;
    color:#ffffff;
    background:#2980b9;
    border-bottom:2px solid #2c3e50;
}
.main-menu .opened a {
    background:#1abc9c;
}
.main-menu > li {position: relative;}
.main-menu .sub-menu {
    position:absolute;
    z-index: 1;
    top:0;
    left: 180px;
}
.main-menu .sub-menu a {
    background-color:#1abc9c;
    border-bottom:2px solid #2ecc71;
}
1 лайк
4

С предудщими мучалась а тут как то очень просто получилось, может что не так? Испытание показывает 100%

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{
    margin: 0;
    padding: 0;
    list-style: none;
    background: #2980b9;
    width: 200px;
}
a {
    color: #ffffff;
    display: block;
    padding: 10px 15px;
    text-decoration: none;
}
.main-menu li {
    border-bottom: 2px solid #2c3e50;
    position: relative;
}
.opened>a{
    background: #1abc9c;
}
.opened>ul{
    position: absolute;
    background: #1abc9c;
    top: 0px;
    left: 180px;
    z-index: 10;
}
.opened ul > li {
    border-bottom: 2px solid #2ecc71;
}
5

Всё хорошо получилось. Только почитайте о свойстве z-index. Возможно вы не до конца понимаете, как оно работает, учитывая выставленное значение 10.

8

z-index это свойство перекрывания. У которого значение больше то оказывается сверху? Или я что то то не так понимаю?

9

Почитайте статью https://habrahabr.ru/post/166435/

10

прочитала но не поняла вообще

11

Что именно не поняли? Задавайте конкретные вопросы.