Выпадающее меню

Курсы §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;
}
.main-menu{
width:200px;
list-style:none;
background:#2980B9;
padding:0;
margin:0
}
.main-menu > li {
border-bottom: 2px solid #2C3E50;
}
.main-menu a {
display: block;
padding: 10px 0px 10px 15px;
color: #fff;
text-decoration: none;
}
.main-menu > .active > a {
color: white;
background: #1ABC9C;
border-bottom: 2px solid #2C3E50;
}
.main-menu ul {
margin: 0;
padding: 0;
list-style: none;
text-decoration:underline;
background-color:#ffffff;
}

.main-menu ul li a{color:#2980B9;}`

2

Выпадающее меню делается с помощью абсолютного позиционирования. Отступы с помощью координат top и left.
Выделенные свойства здесь лишние:
.main-menu ul {
margin: 0;
padding: 0;
list-style: none;
text-decoration:underline;
background-color:#ffffff;
}
Если вам пока тяжело разбираться во вложенности элементов, воспользуйтесь предложенными классами. Например, вместо селектора .main-menu ul можно использовать .sub-menu.
Также обратите внимание, что в HTML-коде нет элемента с классом .active.

1 лайк
3

Это Испытание: многоуровневое меню [15/28]. html не доступен для редактирования. Замучилась с отступами.
` 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;
}
.main-menu{
width:200px;
margin:0;
padding:0;
list-style:none
}

.main-menu a {
display:block;
padding:10px 15px;
border-bottom: 2px solid #2C3E50;
color:#ffffff;
text-decoration:none;
}
.main-menu ul{
margin:0;
padding:0;
list-style:none}
.main-menu > li > a{
background:#2980B9}
.main-menu > .active > a{
background:#1ABC9C;
border-bottom: 2px solid #2C3E50;}
.main-menu li li a{
background:#ffffff;
color:#2980B9;
text-decoration:underline;
border:none;
padding: 15px 0px 15px 15px}
.main-menu>.active>ul>li:last-child{
border-bottom: 2px solid #2C3E50;
}`

4

Да, я смотрела по другому испытанию… По названию.
Отступы у самого подменю 10px с каждой стороны. А отступы у ссылок подменю 5px.
Вам останется добавить белый фон для подменю.
И тогда в последнем правиле изменить селектор на .main-menu .active ul
Пожалуйста, не склеивайте так свой код, трудно разбирать. Вам ведь так тоже не удобно. Вы не замечаете, что не ставите точку с запятой в конце свойства.

1 лайк
5

Громадное спасибо! Про белый фон совсем забыла, все никак понять не могла, что за странность с подменю при отображении :wink:
` 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;
}
.main-menu{
width:200px;
margin:0;
padding:0;
list-style:none;
}

.main-menu a {
display:block;
padding:10px 15px;
border-bottom: 2px solid #2C3E50;
color:#ffffff;
text-decoration:none;
}

.main-menu ul{
list-style:none;
padding: 10px 10px 10px 10px;
background-color:#FFFFFF;
}

.main-menu > li > a{
background:#2980B9;
}

.main-menu > .active > a{
background:#1ABC9C;
border-bottom: 2px solid #2C3E50;
}

.main-menu li li a{
background:#ffffff;
color:#2980B9;
text-decoration:underline;
border:none;
padding: 5px 5px 5px 5px;
}

.main-menu .active ul{
border-bottom: 2px solid #2C3E50;
}`

2 лайка