Некорректное поведение выпадающего меню

@jack_london · Регистрация: 26.07.2013

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

Камрады помогите с выпадающим меню - выпадает, но некорректно...

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<ul class="menu">
                    <li><a href="main.html">Главная</a></li>
                    <li><a href="">Услуги</a>
                        <ul>
                            <li><a href="">Страница 1</a></li>
                            <li><a href="">Страница 2</a></li>
                            <li><a href="">Страница 3</a></li>
                            <li><a href="">Страница 4</a></li>
                        </ul>
                    </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
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
74
75
76
ul.menu {
    width: 800px;
    display: table;
    list-style: none;
    margin-top: 10px;
}
 
ul.menu li  {
    display: table-cell;
    text-align: center;
    border-left: 2px solid #fff;
    background: #5e5e5e; /* Old browsers */
    background: -moz-linear-gradient(top, #5e5e5e 0%, #3f3f3f 50%, #5e5e5e 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5e5e5e), color-stop(50%,#3f3f3f), color-stop(100%,#5e5e5e)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #5e5e5e 0%,#3f3f3f 50%,#5e5e5e 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #5e5e5e 0%,#3f3f3f 50%,#5e5e5e 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #5e5e5e 0%,#3f3f3f 50%,#5e5e5e 100%); /* IE10+ */
    background: linear-gradient(to bottom, #5e5e5e 0%,#3f3f3f 50%,#5e5e5e 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5e5e5e', endColorstr='#5e5e5e',GradientType=0 ); /* IE6-9 */
}
 
ul.menu li:first-child {
    border: none;
}
 
ul.menu li a {
    padding: 8px 35px 8px;
    display: block;
    font-family: Arial;
    font-size: 13px;
    color: white;
    text-decoration: none;
}
 
ul.menu li:hover {
    background: #3f3f3f; /* Old browsers */
    background: -moz-linear-gradient(top, #3f3f3f 0%, #1e1e1e 50%, #3f3f3f 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3f3f3f), color-stop(50%,#1e1e1e), color-stop(100%,#3f3f3f)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #3f3f3f 0%,#1e1e1e 50%,#3f3f3f 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #3f3f3f 0%,#1e1e1e 50%,#3f3f3f 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #3f3f3f 0%,#1e1e1e 50%,#3f3f3f 100%); /* IE10+ */
    background: linear-gradient(to bottom, #3f3f3f 0%,#1e1e1e 50%,#3f3f3f 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f3f3f', endColorstr='#3f3f3f',GradientType=0 ); /* IE6-9 */
}
 
ul.menu li ul {
    margin: 0;
    padding: 0;
    display: none;
    top: 34px;
    width: 150px;
    list-style: none;
}
 
ul.menu li:hover ul {
    display: block;
    text-align: left;
}
 
ul.menu li:hover ul li {
    display: block;
    width: 150px;
    border-right: none;
    border-top: 1px solid #4f4f4f;
}
 
ul.menu li:hover ul li a {
    border-right: none;
    padding: 6px 20px 8px;
    display: block;
}
 
ul.menu li:hover ul li a:hover {
    background-color: transparent;
    color: #c1deff;
}

@StopSmell · 17.09.2013, 00:04

Добавьте:

CSS
1
2
ul.menu li {position: relative;}
ul.menu li ul {position: absolute;}

+
Выравниваем выпадающее меню добавлением

CSS
1
ul.menu li:hover ul li {border-left: none;}

+
И еще вместо:
ul.menu li:hover ul li,
ul.menu li:hover ul li a,
ul.menu li:hover ul li a:hover
правильней будет писать
ul.menu li ul li,
ul.menu li ul li a,
ul.menu li ul li a:hover...
Правило ul.menu li:hover будет наследовать правила у ul.menu li, так что :hover писать не нужно. Наследование - один из принципов css.

@jack_london · 17.09.2013, 01:19 **[ТС]**

всё сделал как вы написали - но меню выпадает вверх

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
ul.menu {
    width: 800px;
    display: table;
    list-style: none;
    margin-top: 10px;
}
 
ul.menu li  {
    display: table-cell;
    position: relative;
    text-align: center;
    border-left: 2px solid #fff;
    background: #5e5e5e; /* Old browsers */
    background: -moz-linear-gradient(top, #5e5e5e 0%, #3f3f3f 50%, #5e5e5e 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5e5e5e), color-stop(50%,#3f3f3f), color-stop(100%,#5e5e5e)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #5e5e5e 0%,#3f3f3f 50%,#5e5e5e 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #5e5e5e 0%,#3f3f3f 50%,#5e5e5e 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #5e5e5e 0%,#3f3f3f 50%,#5e5e5e 100%); /* IE10+ */
    background: linear-gradient(to bottom, #5e5e5e 0%,#3f3f3f 50%,#5e5e5e 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5e5e5e', endColorstr='#5e5e5e',GradientType=0 ); /* IE6-9 */
}
 
ul.menu li:first-child {
    border: none;
}
 
ul.menu li a {
    padding: 8px 35px 8px;
    display: block;
    font-family: Arial;
    font-size: 13px;
    color: white;
    text-decoration: none;
}
 
ul.menu li:hover {
    background: #3f3f3f; /* Old browsers */
    background: -moz-linear-gradient(top, #3f3f3f 0%, #1e1e1e 50%, #3f3f3f 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3f3f3f), color-stop(50%,#1e1e1e), color-stop(100%,#3f3f3f)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #3f3f3f 0%,#1e1e1e 50%,#3f3f3f 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #3f3f3f 0%,#1e1e1e 50%,#3f3f3f 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #3f3f3f 0%,#1e1e1e 50%,#3f3f3f 100%); /* IE10+ */
    background: linear-gradient(to bottom, #3f3f3f 0%,#1e1e1e 50%,#3f3f3f 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f3f3f', endColorstr='#3f3f3f',GradientType=0 ); /* IE6-9 */
}
 
ul.menu li ul {
    margin: 0;
    padding: 0;
    position: absolute;
    display: none;
    top: 34px;
    width: 150px;
    list-style: none;
}
 
ul.menu li:hover ul {
    display: block;
    text-align: left;
}
 
ul.menu li ul li {
    display: block;
    width: 150px;
    border-left: none;
    border-right: none;
    border-top: 1px solid #4f4f4f;
}
 
ul.menu li ul li a {
    border-right: none;
    padding: 6px 20px 8px;
    display: block;
}
 
ul.menu li ul li a:hover {
    background-color: transparent;
    color: #c1deff;
}

@Taatshi · 17.09.2013, 07:23

jack_london,

Комментарий модератора

Нарушение правил форума, пункт 4.4

На каждый вопрос создавайте по одной теме - это помогает избежать путаницы в ответах и облегчает поиск.

Перенесено

@jack_london · 19.09.2013, 00:06 **[ТС]**

up (извиняюсь, если так делать нельзя)

(так кто-то подкорректирует мой код?))

Новые блоги и статьи Все статьи Все блоги /
Как украсить новогоднюю елку с Q# и Qiskit EggHead 24.06.2025 Что может быть необычнее, чем применить законы квантовой механики для украшения новогодней елки? Пока другие развешивают обычные гирлянды, я решил объединить свою страсть к квантовым вычислениям с. . .	Системы нулевого доверия на C# UnmanagedCoder 24.06.2025 Традиционная архитектура безопасности работает по принципу средневекового замка: создаём высокие стены вокруг корпоративной сети, укрепляем ворота межсетевыми экранами и системами обнаружения. . .	Снова не мой путь. Циклическое среднее, я обеими руками за проверку условия, в ракурсе данной задачи - циклическое среднее в топку. Hrethgir 24.06.2025 Привет. Такой вопрос - нужно выводить среднее математическое между двумя направлениями, интервал значений которых может лежать в диапазоне одного оборота по кругу. Проблема заключается в том, что. . .	Деплой Flask приложения py-thonny 23.06.2025 За годы работы с Flask я натыкался на одни и те же грабли достаточно часто, чтобы наконец научится их обходить. И сегодня хочу поделится опытом, который сбережет вам немало нервных клеток. Начнем с. . .	WebAssembly и контейнеры в .NET Aspire для оркестрации распределенных архитектур ArchitectMsa 23.06.2025 Я наблюдаю, как WebAssembly (или просто WASM) постепенно выходит за рамки своего первоначального предназначения — исполнения кода на стороне браузера. Теперь эта технология проникает в серверную. . .
Непрерывная интеграция для пакета Python Mr. Docker 22.06.2025 Было 4 часа утра пятницы, когда я выпустил новую версию нашей внутренней библиотеки для обработки данных. Релиз 0. 5. 2 содержал небольшой фикс для обработки дат в ISO формате, что может пойти не так?. . .	Продвинутый ETL на C# из OLTP БД в хранилище stackOverflow 22.06.2025 Работая в сфере корпоративной аналитики, я постоянно сталкиваюсь с одним и тем же - нужны чистые, структурированные и, главное, свежие данные. Без них современные аналитические системы, машинное. . .	Мастер-класс по микросервисам на Node.js Reangularity 21.06.2025 Node. js стал одной из самых популярных платформ для микросервисной архитектуры не случайно. Его неблокирующая однопоточная модель и событийно-ориентированный подход делают его идеальным для. . .	Управление Arduino из WPF приложения Wired 21.06.2025 Зачем вообще связывать Arduino с WPF-приложением? Казалось бы, у Arduino есть собственная среда разработки, своя экосистема, свои способы управления. Однако при создании серьезных проектов. . .	Звёздная пыль kumehtar 20.06.2025 Я просто это себе представляю: как создавался этот мир. Как энергия слипалась в маленькие частички. Как они собирались в первые звёзды, как во вселенной впервые появился Свет. Как эти звёзды. . .

@jack_london 0 / 0 / 0 Регистрация: 26.07.2013 Сообщений: 20
	19.09.2013, 00:06 [ТС]
	up (извиняюсь, если так делать нельзя) (так кто-то подкорректирует мой код?)) 0

Опции темы