Многоуровневое меню

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

Добрый день. Создал многоуровневое меню на 100%, но в конце заметил, что совсем не использовал класс .main-menu. Подскажите, возможен ли такой вариант кода или это уже считается" так называемым" говнокодом? Ну, и буду признателен, если заметив грубые ошибки ласково ткнете меня в них носом.

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{

}

.main-menu>li>a{
    border-bottom:2px solid #2C3E50;
}
.main-menu li ul{
    margin: 0;
    padding: 10px 0;
    background:#FFFFFF;
    width:200px;
    border-bottom:2px solid #2C3E50;
}
.main-menu ul li a{
    background:#FFFFFF;
    color:#2980B9;
    text-decoration:underline;
    padding:5px 15px;
}
.main-menu>.active>a{
    background:#1ABC9C;    
}
ul{
    list-style:none;
    padding:0;
    margin:0;
}
.main-menu a{
    display:block;
    background:#2980B9;
    text-decoration:none;
    color:white;
    width:170px;
    padding:10px 15px;
}
2

И еще вопрос. При создании горизонтального меню играясь с отступами заметил, что есть разница между

.main-menu li{
display:inline-block;
margin-right:5px;
margin-right:-5px;
}
и
.main-menu li{
display:inline-block;
margin-right:0;
}
Почему так? По логике 5-5 будет 0, но результаты разные.

3

Не сказал бы, что у Вас “Говнокод”, но некоторые излишки есть.
.main-menu, скорее всего подразумевался как раз для тех свойств, что у Вас прописаны:

  1. .main-menu li ul {width:200px;}
  2. ul {list-style: none; padding: 0; margin:0}

Думаю стоит стараться эти 4 свойства все-таки у родителя (.main-menu) записывать.
Вы же задали железно ширину всем вложенным ul, но подумайте - что будет, если в данном контексте - просто удалить вложенные ul?

  • ко всему т.к. Вы сделали 200px ширину и подменю, то вам пришлось задавать еще и для всех ссылок ширину 170.
    Запомните, display: block задает поведение блочного элемента, а он у нас что? Правильно - занимает 100% ширины родителя.
    Следовательно, где-то ошибочка, где - смотрите выше)
1 лайк
4

Вспомните про каскадность в CSS. Будет применено последнее свойство. В этом правиле, сначала Вы сдвигаете li влево на 5px, а потом тут же переопределяете и говорите: “Сдвинься-ка вправо на 5”.

В Css математика есть только у функции calc() =)

1 лайк
5

Точно )) интуитивно ощущал, что-то подобное, но вспомнил только тогда, когда вы мне об этом напомнили ))
За первый ответ тоже спасибо, пошел исправлять ошибки )

1 лайк