Испытание: многоуровневое меню [15/28]

Курсы §13. Мастерская: создаём меню
1

оцените код , пожалуйста.
html,
body {
margin: 0;
padding: 0;
}

body {
width: 280px;
min-height: 280px;
padding: 10px;
font-family: “Arial”, sans-serif;
font-size: 14px;
line-height: 1.4;
background: #ecf0f1;
}

ul {
list-style: none;
padding: 0;
margin: 0;

}

a {
display: block;
background-color:#2980b9;
padding: 10px 15px;
border-bottom: 2px solid #2c3e50;
width: 170px;
color: white;
text-decoration: none;
}
.main-menu >.active> a{
background-color:#1abc9c ;
color: white;
text-decoration: none;
border-bottom: 2px solid #2c3e50;
padding: 10px 15px;

}

.main-menu ul a {
padding: 15px;
background-color: white;
color:#2980b9;
text-decoration: underline;
border:none ;
}
.main-menu ul li:nth-child(1) a{
padding-top: 15px;
padding-bottom: 10px;
}
.main-menu ul li:nth-child(2) a{
padding-top: 0px;
padding-bottom: 0px;
}

.main-menu ul li:nth-child(3) a{
border-bottom: 2px solid #2c3e50;
padding-top: 10px;
}

2

Расскажите, для чего в вашем коде существует это правило:
.main-menu >.active> a{
background-color:#1abc9c ;
color: white;
text-decoration: none;
border-bottom: 2px solid #2c3e50;
padding: 10px 15px;
}
А вот эти правила больше похожи на подгонку под образец:
.main-menu ul li:nth-child(1) a{
padding-top: 15px;
padding-bottom: 10px;
}
.main-menu ul li:nth-child(2) a{
padding-top: 0px;
padding-bottom: 0px;
}

.main-menu ul li:nth-child(3) a{
border-bottom: 2px solid #2c3e50;
padding-top: 10px;
}
А представьте, что в подменю не три пункта, а восемь например.
Не надо подбирать отдельные отступы для каждого пункта. Вместо этого лучше задать отдельно отступы для ссылок и отдельно отступы сверху и снизу для ul подменю.

3

1)это правило для ячейки “Курсы” , оформление
2) когда так делаю, происходит разрыв между основным меню и подменю

4
  1. В этом правиле вам нужен только фон. Все остальные свойства уже прописаны для a { … }
5

точно. спасибо за подсказку. а как быть с разрывами между меню и подменю?

6

Фон белый прописать для ul подменю.