Горизонтальное меню с выпадающим подменю [24/28]

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

Не могу понять, почему в данном примере display:inline-block; делает строчно-блочными только элементы списка подменю (только они выстраиваются в одну строку), а элементы списка верхнего уровня как стояли столбиком, там и стоят. Ведь .main-menu li должно действовать на все элементы списка, находящиеся в контейнере .main-menu? Тогда как .main-menu>li загоняет элементы списка верхнего уровня в строку.

.main-menu li{
    display:inline-block;
    margin-right:-4px;
}

Полный код задания на всякий случай.

<!DOCTYPE html>
<html>
    <head>
       <title>Горизонтальное меню с выпадающим подменю</title>
       <meta charset="utf-8">
    </head>
    <body>
        <ul class="main-menu">
            <li><a href="#company">О компании</a></li>
            <li>
                <a href="#services">Услуги</a>
                <ul class="sub-menu">
                    <li><a href="#1">Разработка</a></li>
                    <li><a href="#2">Продвижение</a></li>
                    <li><a href="#3">Контекст</a></li>
                </ul>
            </li>
            <li><a href="#team">Сотрудники</a></li>
        </ul>
    </body>
</html>

CSS

.main-menu{
    padding:0;
    margin:0;
    list-style:none;
    border:1px solid #E5E5E5;
}
.main-menu li{
    display:inline-block;
    margin-right:-4px;
}
.main-menu a{
    display:block;
    padding:8px 10px;
    margin-left:-1px;
    color:#0088CC;
    border-left:1px solid #E5E5E5;    
}
.main-menu a:hover{
    background:#f5f5f5;
}

.main-menu .sub-menu{
    padding:0;
    margin:0;
    background:#FCF8E3;
}
body{
    font-family:Arial, sans-serif;
    font-size:14px;
    line-height:1.4;
    padding:10px;
    min-width:300px;
}
2

А ведь правда интересно. Если скопировать текст задания в «песочницу», например, и глянуть — там всё как нужно отображается.
Рискну предположить, что это сделано авторами курса специально, чтобы лучше была видна работа стилей при их изменении, и «перебивающий» css-код прописан в коде страницы задания. Попытался его найти, но там слишком много стилей. То есть так спецом задумано, загоняться не стоит. Но подождём «официального» ответа, мне тоже интересно))

3

Жесть, к странице подключено аж три файла стилей, и они в одну строчку. Хотел сначала попробовать докопаться до истины по-быстрому, увидел это и передумал :smiley:

4

Сорри за небольшую дезинформацию. Я кажется понял причину. Вот годный комментарий к заданию, с объяснением, почему происходит именно так.

5

@Leo в последнем комментарии даёт правильную отсылку. Изначально display: inline-block применяется ко всем li на странице. Второй li из-за содержимого просто слишком широкий для мини-браузера, и поэтому пункты главного меню идут в столбик. Попробуйте добавить рамку outline: 1px solid; для li и увидите, как именно располагаются блоки.

6

Всем спасибо. Все в голове стало по местам (в коде тоже все прояснилось).

7

Не пойму, почему “О компании” в первом блоке. Где это прописано в CSS?
А, кажись догнал)

8

Подскажите, для чего нужно изменить

.main-menu li
на
.main-menu > li
Не пойму что-то (

9

селектор .main-menu li выберет все li, которые находятся в main-manu - это будут как элементы основного списка, так и подменю
когда мы пишем .main-menu > li, то мы хотим выбрать только дочерние li (т.е. те li, которые имеют родителем непосредственно .main-menu, а не всякие “внучатые” li расположенные глубже по иерархическому дереву (в подменю)).

более подробно - см. тему Селекторы, часть 1 / Дочерние селекторы [8/18]

1 лайк
10

Спасибо!)