20/28 100% код.

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

Вот 100% код,кому интересно (и немного хитрозадый!)
класс hover можно не добавлять (по желанию)
Спойлер:

html,

body {
margin: 0;
padding: 0;
}

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

ul {
margin-top: 0px;
padding: 0;
background: #2980b9;
}

li {
margin-right: -5px;
list-style: none;
display: inline-block;
padding: 10px 15px 10px 15px;
background: #2980b9;
border-left: 2px solid #2c3e50;
}

a {

text-decoration: none;
color: white;

}

li:hover {
background: #1abc9c
}

.active {
background: #1abc9c
}

2

И в чем особенность вашего кода?

3

мне кажется,он короче остальных,нет?
еще я хотел получить критики, оценку метода и т.д. (закрашивание ul )
к слову,тут все почему то классы используют,а мне удобнее родные селекторы,вот еще отличие)

4

лучше отвыкать от использования тегов в качестве селекторов (либо же тогда использовать их в рамках каскада: .main-menu li, .main-menu a) т.к. у вас вполне может оказаться на странице несколько списков, стилизовать которые требуется по-разному

5

ну это я знаю,просто в рамках маленьких задач я пренебрегаю этим)

6

далее, у ul нет паддингов, т.е. ul нигде за размеры li не выступает - смысл тогда задавать бэкграунд для всего списка, если вы задаете точно такой же для каждого li?
то, что паддинги правильнее задавать ссылкам, а не li, было и в теории и неоднократно говорилось на форуме

7

В своем посдеднем варианте я как раз падинги ссылкам дал.)
выступает к сожалению,я для удобства ul всегда красный цвет даю,он выступал
может я незаметно для себя это исправить успел,не знаю)

8

тогда, здесь, вы наверное, выложили не последний вариант.

е[quote=“David_Shiko, post:7, topic:5624, full:true”]
выступает к сожалению,я для удобства ul всегда красный цвет даю,он выступал
[/quote]

ок (честно говоря, не помню) , тогда задаем бэкграунд для ul, но не дублируем его для li

9

Так по-моему ul не дублирует li ,т.е. , ul это иллюзорно контейнер ,у которого внутри пусто. а li уже дает цвет внутри. я могу ошибаться)
спасибо

10

если для li не задать цвет, то считайте, что это прозрачный элемент и “просвечивает” цвет родителя (у нас это будет цвет ul).

11

Не знал,спасибо,возьму на заметку)
только что 20 минут парился,не понимал,почему ограничитель наследников ( > ) ограничивает display-block,но не мешает наследовать падинг.
оказалось, просто 2жды падинг задал,разным селекторам, не знал,что они суммируются,думал перебивают друг друга. А ларчик просто открывался…)
(просто делюсь)