Испытание: выпадающее меню [28/28] 100% Что можно улучшить или сократить?

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

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{
width:200px;
list-style:none;
margin:0;
padding:0;
}
a{
text-decoration:none;
color:white;
}
.main-menu > li{
background:#2980b9;
border-bottom:2px solid #2c3e50;
padding:10px;
padding-left:15px;

}

.main-menu li.opened{
background:#1abc9c;
}
.main-menu .opened .sub-menu{
position:absolute;
top:51px;
left:190px;
background:#1abc9c;
}
.sub-menu li{
border-bottom:2px solid #2ecc71;
padding:10px;
padding-left:15px;
}

2

если бы подменю спозиционировали относительно того пункта меню, из которого он выпадает, а не относительно окна браузера, то выполнялось бы условие кратности 5

а в плане глобального улучшения: отступы нужно задавать ссылкам (чтобы увеличить размер “кликабельной” области), а не элементам списка

3

Спасибо

4

Прошу оценить и мой код.

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;
}

ul {
list-style: none;
}

.main-menu {
padding: 0;
margin: 0;

}
.main-menu li a {
position: relative;
text-decoration: none;
display: block;
width: 175px;
border-bottom: 2px solid #2c3e50;
background: #2980b9;
color: #fff;
padding: 10px 10px 10px 15px;

}

.main-menu .opened a {
background: #1abc9c;

}
.sub-menu {
position: absolute;
top: 51px;
left: 150px;
}

.sub-menu li a {
z-index: 1;
background: #1abc9c;
border-bottom: 2px solid #2ecc71;
}

5

Не задавайте ссылке ширину. Если необходимо, пропишите ее для списка ul.
position: relative для ссылки не дает нужного эффекта (смены точки отсчета координат не происходит). Всё потому что ссылка не является родителем по отношению к списку подменю. Всегда помните об этой маленькой детали.

1 лайк
6

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;
padding:0;
margin:0;
width:200px;
}
.main-menu a{
display:block;
text-decoration:none;
color:#ffffff;
padding:10px 15px;
background:#2980b9;
border-bottom:2px solid #2c3e50;
}
.main-menu .opened{
position:relative;

}
.main-menu .opened a{
background:#1abc9c;
}
.main-menu .sub-menu{
position:absolute;
left:180px;
top:0px;
}
.main-menu .sub-menu a{
background:#1abc9c;
border-bottom:2px solid #2ecc71;
}

7

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{
list-style: none;
padding: 0;
margin: 0;
}

ul{
width: 200px;
}

.main-menu > li{
background-color: #2980b9;
border-bottom: 2px solid #2c3e50;

}

a{
display: block;
padding: 10px 15px;
color: white;
text-decoration: none;
}

.main-menu .opened{
position: relative;
background-color: #1abc9c;
}

.sub-menu{
list-style: none;
position: absolute;
top: 0px;
left: 180px;
padding: 0;
background-color:#1abc9c;
z-index: 2;
}

.sub-menu a{
border-bottom: 2px solid #2ecc71;
}

8

Маркеры подменю тоже надо убирать. Запись display: block; для li лишняя. Ширину 200px лучше задавать списка ul.

9

Исправил.
А почему лучше ul, а не li задавать ширину?

10

Ограничивая ширину пункта вы можете в какой-то момент нечаянно “обрезать” текст внутри него. Поэтому лучше задавать ширину родительскому контейнеру, а пункт li как блочный элемент будет тянуться на всю возможную ширину своего родителя.

1 лайк
11

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

12

Может не надо упоминать в первом правиле ссылки подменю, если вы потом создаете для их стилей отдельное правило?

13

Хотел некоторые правила объединить, что бы код получился более коротким, но просчитался. В последствии его пришлось снова задействовать. Спасибо за замечание, есть еще на чем поработать?

14

Больше ничего такого не заметила. Всё в порядке.

15

Пожалуйста, проверьте код…может можно что-нибудь можно сократить?и правильность написания селекторов
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 {
padding:0;
list-style:none;
margin:0;
width:200px;
}
.main-menu a {
padding:10px 15px;
color:white;
text-decoration:none;
border-bottom: 2px solid;
}
.main-menu > li > a {
display:block;
background:#2980b9;
border-color:#2c3e50;
}
.sub-menu a{
display:block;
background:#1abc9c;
border-color:#2ecc71;
}
.main-menu .opened > a {
background:#1abc9c;
}
.main-menu > li {
position:relative;
}
.sub-menu {
position:absolute;
left:180px;
top:0;
z-index:10;
}

16

Cсылку дважды блочной объявили. Лучше было написать один раз в правиле для .main-menu a { … }
Других замечаний нет.

17

Спасибо))