Испытание: многоуровневое меню

webhero · 23.Январь.2017 10:11:03

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Испытание: многоуровневое меню</title>
    </head>
    <body>
        <ul class="main-menu">
            <li class="active">
                <a href="/courses">Курсы</a>
                <ul>
                    <li><a href="/courses/4">Знакомство</a></li>
                    <li><a href="/courses/42">Селекторы</a></li>
                    <li><a href="/courses/45">Позиционирование</a></li>
                </ul>
            </li>
            <li><a href="/demos">Демонстрации</a></li>
            <li><a href="/public_profiles">Участники</a></li>
            <li><a href="/achievments">Достижения</a></li>
        </ul>
    </body>
</html>

html,
body {
margin: 0;
padding: 0;
}

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

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

.main-menu ul {
padding: 0;
}

.main-menu li {
padding: 10px;
border-bottom: 2px solid #2c3e50;
background-color: #2980b9;
list-style: none;
text-decoration: none;
}

.main-menu a {
padding: 0px;
text-decoration: none;
color: #fff;
padding-left: 5px;
}

.main-menu .active {
background-color: #1abc9c;
}

.main-menu .active li {
background-color: #fff;
color: #2980b9;
text-decoration: underline;
}

.main-menu .active li a {
background-color: #fff;
color: #2980b9;
}

Никак не могу понять почему мой блок как бы въехал в другой?

Ineska · 23.Январь.2017 10:21:14

Начните с того, что задайте ul подменю какой-нибудь класс. Тогда вы сможете стилизовать ссылки подменю отдельно. Также уберите padding: 10px; у li. Размеры пунктов - это размеры ссылок, поэтому отступы надо задавать именно ссылкам.

webhero · 23.Январь.2017 12:47:50

Не совсем понял вас. Я же не могу редактировать хтмл код, тем более там уже же есть клась active.
Паддинг убрал, все сжалось, добавляю паддинг ссылкам, получается такая вот каша:

Ineska · 23.Январь.2017 12:55:17

Не посмотрела, что html-код защищен от редактирования, извините. Но в общем суть от этого не меняется. Вы должны отдельно стилизовать ссылки меню 1-го уровня и отдельно 2-го уровня.
Например, с помощью таких селекторов:

.main-menu a { ... } /* для ссылок первого уровня */
.main-menu ul a { ... } /* для ссылок второго уровня */

Tala · 23.Январь.2017 15:49:24

но этот же селектор выберет все a, независимо от уровня меню.
чтобы были ссылки только первого уровня, нужно использовать дочерние селекторы:.main-menu > li > a

Ineska · 23.Январь.2017 16:36:58

Да, правы. Спасибо за уточнение. Но учитывая каскад, второй селектор все равно выберет ссылки только второго уровня, то есть стили переопределятся.

Tala · 23.Январь.2017 16:39:56

а, ну да, это я не учла

Ineska · 23.Январь.2017 16:43:45

Автору темы будут полезны оба варианта, я думаю)

webhero · 24.Январь.2017 05:33:26

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

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

.main-menu li { /элементы списка 1 уровня/
border-bottom: 2px solid #2c3e50;
background-color: #2980b9;
text-decoration: none;
}

.main-menu a { /ссылки 1 уровня/
display: block;
text-decoration: none;
color: #fff;
padding-left: 5px;
padding: 10px;
}

.main-menu ul a { /ссылки 2 уровня/
background-color: #fff;
color: #2980b9;
text-decoration: underline;
margin-bottom: -2px;
}

.main-menu .active { /пункт Курсы/
background-color: #1abc9c;
}

Ineska · 24.Январь.2017 07:20:42

Давайте тогда разбираться, чья это может быть рамка? Это может быть рамка снизу у ссылки активного пункта меню, это может быть рамка сверху у списка подменю. Выбирайте.

Ваш способ спрятать рамки у пунктов подменю никуда не годится. Для этого обычно пишут border: none;

Всё, что есть в этом правиле - это свойства ссылок меню. Не понимаю, зачем разделили.
Отступы для ссылок второго уровня будут другие. Их надо прописать отдельно.

webhero · 24.Январь.2017 11:36:23

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 ul {
margin: 0;
padding: 0;
list-style: none;
border-bottom: 2px solid #2c3e50;
}

.main-menu li { /элементы списка 1 уровня/
background-color: #2980b9;
}

.main-menu a { /ссылки 1 уровня/
display: block;
text-decoration: none;
color: #fff;
padding: 10px 0 10px 15px;
border-bottom: 2px solid #2c3e50;
}

.main-menu ul a { /ссылки 2 уровня/
background-color: #fff;
color: #2980b9;
text-decoration: underline;
padding: 10px 0 10px 15px;
border: none;
}

.main-menu .active { /пункт Курсы/
background-color: #1abc9c;
}

.main-menu .active > a {
border-bottom: 2px solid #2c3e50;
}

Это обновленный код, кое что помогло, спасибо, пришлось перелатать некоторые части, но все же открытым остается вопрос, как сжать паддинг между ссылками подменю, но при этом оставить сверху и снизу, я уже извелся над этим заданием, все время открываю что-то новое, хотя вроде бы все просто кажется на первый взгляд

Ineska · 24.Январь.2017 12:23:27

Отступы сверху и снизу - это отступы списка подменю.

webhero · 24.Январь.2017 13:24:41

Список подменю выглядит так: .main-menu ul li {} или я ошибаюсь?

Ineska · 24.Январь.2017 14:32:11

Список -это ul.

webhero · 25.Январь.2017 10:27:23

Когда я применяю маргин и паддинг к ul , у меня выходит вот так

Ineska · 25.Январь.2017 10:29:03

Никто не мешает вам добавить белый фон для ul.

webhero · 25.Январь.2017 10:32:17

Действительно, хм. Почему я сразу не покрыл, не понимаю. Получается надо фон задавать и для списка и для ссылок

Ineska · 25.Январь.2017 10:34:11

Если подменю такое - с отступами, то это хороший вариант.

webhero · 25.Январь.2017 10:48:37

Наконец-то! Вот код на 100%

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 ul {
margin: 0;
padding: 0;
list-style: none;
border-bottom: 2px solid #2c3e50;
padding-top: 15px;
padding-bottom: 5px;
background-color: #fff;

}

.main-menu li { /элементы списка 1 уровня/
background-color: #2980b9;
}

.main-menu a { /ссылки 1 уровня/
display: block;
text-decoration: none;
color: #fff;
padding-bottom: 10px;
padding-left: 15px;
border-bottom: 2px solid #2c3e50;
}

.main-menu > li > a {
padding: 10px 0 10px 15px;
}

.main-menu ul a { /ссылки 2 уровня/
background-color: #fff;
color: #2980b9;
text-decoration: underline;
border: none;
}

.main-menu .active { /пункт Курсы/
background-color: #1abc9c;
}

.main-menu .active > a {
border-bottom: 2px solid #2c3e50;
}

НО! Очень странная ситауация для этого подменю: паддинг сверху и снизу я задаю ему списку ul, но при этом паддинг слева и межстрочный паддинг я задаю ему в ссылках 1уровня, хотя по идее это же вроде ссылки 2 уровеня (вложенного в первый). Это задание очень непонятное и специфичное для меня.

Ineska · 25.Январь.2017 11:18:04

Поработайте с отступами еще. Они у вас не симметричны.

Это для чего?