Исчезновение подменю

@JohnAlterat · Регистрация: 23.12.2013

Студворк — интернет-сервис помощи студентам

Доброго времени суток. Данный вопрос уже подымал в существующей теме, но решение так и не было найдено, по этому обращаюсь снова к вам, комрады форумчане, за помощью.

Стандарное горизонтальное меню (еще кривоват в их создании но исправляюсь)
Добавил цвет фона, дабы было видно само меню из-за отсутсвия картинки

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<ul class="menu">
                <li><a href="#">Главная</a></li>
                <li><a href="#">О нас</a>
                    <ul>
                        <li><a href="#">Название подраздела</a></li>
                        <li><a href="#">Название подраздела</a></li>
                        <li><a href="#">Название подраздела</a></li>
                        <li><a href="#">Название подраздела</a></li>
                    </ul>
                </li>
                <li><a href="#">Новости</a></li>
                <li><a href="#">Полезное</a></li>
                <li><a href="#">Интересное</a></li>
                <li><a href="#">Необычное</a></li>
                <li><a href="#">Странное</a></li>
            </ul>

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
.menu{
    list-style-type: none;
    background: url(../images/nav.png);
    height: 49px;
    position: relative;
    top:-200px;
    background-color: #b7b7b7;
}
 
 ul.menu li{
    display: block;
    float: left;
    padding-left: 22px;
    padding-top: 17px;
    position: relative;
 
 
}
 
 ul.menu li ul{
     display: none;
     float: left;
     position: absolute;
 }
 
 
 ul.menu li:hover ul {
     display: block;
     background: url(../images/dropdown.png);
     width: 990px;
     top:43px;
     left: -68px;
     background-color: #b7b7b4;
 }
 
 ul li a{
     text-decoration: none;
     text-align: center;
     position: relative;
     color: #000000;
     font-family: Arial, bold;
     font-size: 9pt;
 
 }

При наведении должно появляться подменю, в котором так же можно выбирать необходимые под категории. Собственно это сделал, вроде как. Но есть главный нюанс. Меню и подменю должны проходить ровно по стыку изображений у них в стилях, не выше, не ниже. Попробовал через margin-top (без position) и с оным - одно и тоже. Довожу значение до определенного показателя и подменю исчезает как только убирается мышка с родительского пункта. Подскажите пожалуйста, может сделал что не так? Как можно выполнить сию задумку?

@Crystal-3 · 15.09.2014, 16:16

JohnAlterat, здравствуйте) Помню я вашу тему, попробую помочь.
Для того, чтобы выровнять надписи по вертикали допишите:

CSS
1
2
3
.menu {
      line-height:49рх;
}

Дальше, чтобы кликабельной была вся область кнопки, а не только надпись, добавляете:

CSS
1
2
3
ul li a {
    display:block;
}

Ну и уберите этот padding, от уже не нужен:

CSS
1
2
3
ul.menu li {
    padding-top:17px;
}

@zackuz · 15.09.2014, 16:27

Попробуй это:

HTML5
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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta charset="utf-8">
<style> 
ul{
    list-Style:none;
    margin:0;
    padding:0;
    margin:auto;
    background:#f0f0f0;
}
.menu li{
    float:left;
    position:relative;
}
.menu li a{
    display:inline-block;
    height:50px;
    line-height:50px;
    padding:0 20px;
    background:#69c;
    color:#fff;
    text-transform:uppercase;
    text-decoration:none;
}
.menu li a:hover{
    background:#369;
}
.menu li ul{
    display:none;
    position:absolute;
    left:0; 
}
.menu li:hover ul{
    display:block;
}
.menu li li{
    float:none;
}
.menu li li a{
    display:block;
    background:#f60;
    white-space:nowrap;
}
.menu li li a:hover{
    background:#d30;
}
</style>
</head>
 
<body>
 
<ul class="menu">
                <li><a href="#">Главная</a></li>
                <li><a href="#">О нас</a>
                    <ul>
                        <li><a href="#">Название подраздела</a></li>
                        <li><a href="#">Название подраздела</a></li>
                        <li><a href="#">Название подраздела</a></li>
                        <li><a href="#">Название подраздела</a></li>
                    </ul>
                </li>
                <li><a href="#">Новости</a></li>
                <li><a href="#">Полезное</a></li>
                <li><a href="#">Интересное</a></li>
                <li><a href="#">Необычное</a></li>
                <li><a href="#">Странное</a></li>
            </ul>
 
</body>
</html>

@JohnAlterat · 15.09.2014, 20:00 **[ТС]**

Crystal-3, zackuz, спасибо, помогло. Последний вопрос, может глупый, но всё же: зачем ставить значение block для "а", если же оно присутствует в родительских элементах и по идее должно их наследовать?

@Lena-T-1981 · 15.09.2014, 20:16

zackuz, Crystal-3, Спасибо

@zackuz · 15.09.2014, 20:22

У всех селекторов есть приоритет вызовов. А самый первый css заложен браузером, так что display:block родителя может не отменить, значение по умолчанию.

@JohnAlterat · 15.09.2014, 21:09 **[ТС]**

zackuz, понял спасибо.

Новые блоги и статьи Все статьи Все блоги /
Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .
Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/

@JohnAlterat 6 / 0 / 1 Регистрация: 23.12.2013 Сообщений: 85
	15.09.2014, 20:00 [ТС]
	Crystal-3, zackuz, спасибо, помогло. Последний вопрос, может глупый, но всё же: зачем ставить значение block для "а", если же оно присутствует в родительских элементах и по идее должно их наследовать? 0

@Lena-T-1981 5 / 5 / 0 Регистрация: 12.09.2014 Сообщений: 22
	15.09.2014, 20:16
	zackuz, Crystal-3, Спасибо 0

@zackuz 18 / 18 / 5 Регистрация: 03.09.2014 Сообщений: 66
	15.09.2014, 20:22
	У всех селекторов есть приоритет вызовов. А самый первый css заложен браузером, так что display:block родителя может не отменить, значение по умолчанию. 0

@JohnAlterat 6 / 0 / 1 Регистрация: 23.12.2013 Сообщений: 85
	15.09.2014, 21:09 [ТС]
	zackuz, понял спасибо. 0

Исчезновение подменю

Решение

Решение