Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.61/18: Рейтинг темы: голосов - 18, средняя оценка - 4.61
-25 / 0 / 1
Регистрация: 08.12.2013
Сообщений: 150
1

Обьясните пожалуйста как работает селектор .main-menu > li:hover .sub-menu

06.07.2018, 15:43. Показов 3151. Ответов 1
Метки нет (Все метки)

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
[HTML]<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8">
        <title>Отображаем подменю при наведении</title>
    </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>
            <li><a href="#contacts">Контакты</a></li>
        </ul>
    </body>
</html>
[/HTML]

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
body {
    padding: 10px;
    font-family: "Arial", sans-serif;
    font-size: 14px;
    line-height: 1.4;
}
 
.main-menu {
    width: 180px;
    margin: 0;
    padding: 0;
    list-style: none;
}
 
.main-menu a {
    display: block;
    margin-bottom: -1px;
    padding: 8px 14px;
    text-decoration: none;
    color: #0088cc;
    border: 1px solid #e5e5e5;
}
 
.main-menu a:hover {
    background: #f5f5f5;
}
 
.main-menu > li {
    position: relative;
}
 
.main-menu .sub-menu {
    position: absolute;
    top: 5px;
    left: 170px;
    z-index: 10;
    width: 150px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #fcf8e3;
    display:none;
}
 
 
/* Cелектор для подменю, если навести мышь */
/* на родительский элемент верхнего меню */
 
.main-menu > li:hover .sub-menu {
    display:block;
}
Обьясните пожалуйста как работает селектор .main-menu > li:hover .sub-menu

Почему когда я пишу в CSS селектор .main-menu > li:hover .sub-menu он действует именно на второй пункт меню, а не на все. То есть я новожу курсор на второй пункт меню и появляется под меню, почему при наведение на любой другой пункт li не появляется подменю. Мне непонятна логика этого селектора .main-menu > li:hover .sub-menu объясните пожалуйста друзья.
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
06.07.2018, 15:43
Ответы с готовыми решениями:

Подскажите, как настроить Main menu
Ребят, как сделать так, чтобы в менюшке при выборе к примеру &quot;Розрахувати склад продукции&quot; на форме...

Main Menu
Написать программу Excel в Main menu! помогите плиз!

Main menu
Доброго времени суток, скажите пожалуйста как быть с меню , оно работает ,при нажатии на бургер...

Компонент menu и menu.section вывести картинку
Здравствуйте, просмотрел все различные тему, перепробовал все приведенные коды, но картинку так и...

1
-25 / 0 / 1
Регистрация: 08.12.2013
Сообщений: 150
06.07.2018, 15:59  [ТС] 2
А все понял этот селектор действует только для li внутри которого есть дочерний элемент с классом .sub-menu
Вопрос решен )
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
06.07.2018, 15:59

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

Компонент Main Menu...
Как сделать в главном меню вот такой разделитель (полоска) как показано на рисунке... Помогите...

Как выбрав сточку из main menu открыть новую форму в которой будет открыта таблица с БД
Есть форма MDI,нужно чтобы выбрав сточку из main menu открывалась дочерняя форма в которой будет...

Сдвинуть main menu вниз
Здравствуйте! Как сдвинуть меню вниз, сайт http://texkom.su/ нужно переместить главное меню под...

main menu в шаблоне ot ante
Проблема в следующем находясь в одном из пунктов главного меню (каталог товаров) наведя курсор...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.