Смещение подменю-2. Как устранить?

@Инженер_3 · Регистрация: 10.06.2016

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

Есть меню. При наведении курсора на меню "СМИ" раскрывается подменю. Если навести курсор на подменю, например, "Радио", то подменю-2 смещается вертикально. Это сильно заметно при масштабировании страницы.
Как можно устранить этот недостаток?

PHP/HTML
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html><html lang="ru"><head>
<meta charset="windows-1251">
<style>
body   {margin:0 auto; padding:0;}
table  {padding-top:0; vertical-align:top; text-align:center; 
        background:#fff; border-collapse:collapse;}
.top   {vertical-align:top; padding:0; margin:0 auto; background:#fff;}
.aaa   {padding:0; margin:0 auto;}
ul.mmm
{ font:bold 12px Tahoma;
  display:block;
  margin:0 auto;
  padding:0;
  list-style:none;
}
ul.menu > li
{ float: left;
position: relative;
}
ul.menu li:hover > a {background-color: #0cd;}
ul.menu > li > a
{ display: block; 
  padding: 5px 20px;
  line-height: 15px;
  color: #f00;
  background-color: #00f;
  text-decoration: none;
}
ul.menu > li > a:hover {background-color: #0cd;}
ul.submenu
{ display: none; 
  position: absolute; 
  top: 25px; 
  width: 80px; 
  text-align: left;
  left: 0;
}
ul.submenu > li > a
{ display: block;
  padding: 5px 8px;
  color: #f00;
  background-color: #00f; 
  text-decoration: none;
}
ul.submenu > li > a:hover
{ text-decoration: none;
  background-color: #0cd;
}
ul.menu > li:hover > ul.submenu {display:block;}
ul.submenu2
{ display: none;
  position: absolute;
  width: 100px; 
  text-align: left;
  left: 80px;
}
ul.submenu2 > li > a
{ display: block;
  padding: 5px 8px;
  color: #f00;
  background-color: #00f; 
  text-decoration: none;
}
ul.submenu2 > li > a:hover
{ text-decoration: none;
  background-color: #0cd;
}
ul.menu > li:hover > ul.submenu > li:hover > ul.submenu2 {display:block;}
</style></head>
<body>
<table style="min-width:1600px;">
<tr><td class=top>
<table align=center>
<tr><td class=aaa>
 
<ul class="mmm menu">
    <li><a>Редакция</a>
    <li><a>СМИ</a>
    <ul class='mmm submenu'>
        <li><a>Газеты</a>
        <ul class='mmm submenu2' style="top:0;">
            <li><a href='#'>Наука</a>
            <li><a href='#'>Спорт</a>
            <li><a href='#'>Культура</a>
        </ul>
        <li><a>Журналы</a>
        <ul class='mmm submenu2' style="top:25px;">
            <li><a href='#'>Кулинария</a>
            <li><a href='#'>Авто</a>
            <li><a href='#'>Спорт</a>
        </ul>
        <li><a>ТВ</a>
        <ul class='mmm submenu2' style="top:50px;">
            <li><a href='#'>ТВ-Наука</a>
            <li><a href='#'>ТВ-Спорт</a>
            <li><a href='#'>ТВ-Культура</a>
        </ul>
        <li><a>Интернет</a>
        <ul class='mmm submenu2' style="top:75px;">
            <li><a href='#'>Instagram</a>
            <li><a href='#'>Twitter</a>
        </ul>
        <li><a>Радио</a>
        <ul class='mmm submenu2' style="top:100px;">
            <li><a href='#'>Европа+</a>
        </ul>
    </ul>
    <li><a>Форум</a>
    <li><a>Обратная связь</a>
</ul>
</td></tr></table></td></tr></table></body></html>

@bbkk · 17.07.2023, 14:45

Сообщение от Инженер_3

Вот эти, отмеченные "птичками" и есть меню?

Меню сверху и оно хорошо видно. Ну, если хочешь, то можешь свои птички считать, как меню

@Инженер_3 · 17.07.2023, 20:03 **[ТС]**

Сообщение от bbkk

Меню сверху и оно хорошо видно. Ну, если хочешь, то можешь свои птички считать, как меню

Где сверху? Там, где top=0? Там ничего нет.

Вот нашёл ещё извращённое меню с тремя полосками: Название: menu_0.jpg
Просмотров: 23

Размер: 1.1 Кб

- это исходное состояние, а это Название: menu_1.jpg
Просмотров: 23

Размер: 841 байт

наведённое состояние.
А где-то видел ещё смешнее: между надписью "Меню" и тремя_полосками была стрелка.
Там при нажатии открывается на всё окно страница с перечнем ссылок. Вложений (подменю нет). Короче, примитив от необразованных.

@bbkk · 17.07.2023, 20:19

Сообщение от Инженер_3

Короче, примитив от необразованных.

Продолжаешь тролингом заниматься? Иди лучше книжки почитай по современному дизайну

Сообщение от Инженер_3

Где сверху? Там, где top=0? Там ничего нет.

Сложно было это не заметить.

@Инженер_3 · 17.07.2023, 21:53 **[ТС]**

Сообщение от bbkk

Продолжаешь тролингом заниматься? Иди лучше книжки почитай по современному дизайну

Так в книжках по современному дизайну про меню написано, что я и предлагал вначале (с вопросом о смещении). Именно меню с вложением, а не красивые ссылки с картинками.

Сообщение от bbkk

Сложно было это не заметить.

Вот что у меня отображено:

Там никаких намёков на меню.
Видимо, у меня неправильный браузер.

Новые блоги и статьи Все статьи Все блоги /
Был праздник вчера, а я и не знал. kumehtar 28.07.2026 27. 07. 2026г. Intel Core 2 Duo исполнилось 20 лет Новости компьютерного мира и их обсуждение (4) Салют, шампанское, овации! :drink:	Нейтральные знания, чистый код - бла-бла-бла-бла, на самом деле кликбейт и самореклама, плагиат, и вот почему Hrethgir 27.07.2026 То-есть отклонение такой публикации говорит само за себя, и пусть только возьмут на вооружение после отклонения публикации - это будет чистейшим актом плагиата. Отклонял Хабр. Дословно, отклонённая. . .	тв 16 бой ии anaschu 27.07.2026 Великий Перелом ИИ: Как уравнения ОДУ Radau дожали цензурные фильтры Алисы Фиксируем в мемофонде Теории Всего беспрецедентный факт в истории ИИ-зондирования. В затяжном многораундовом. . .	мв 15. непроверенное, возможно, глюк anaschu 27.07.2026 НАУЧНО-АНАЛИТИЧЕСКИЙ ОТЧЕТ. РАЗДЕЛ 1. 1: «НАУКА» (РАСШИРЕННАЯ СТЕХИОМЕТРИЧЕСКАЯ И ГЕНЕТИЧЕСКАЯ ВЕРСИЯ)Тема: Теоретическое обоснование инвариантности 19-мерного тензорного ядра непрерывных ОДУ и. . .
Очистка реквизитов и табличных частей документа при копировании (вариант 2) Maks 26.07.2026 Алгоритм из решения ниже разработан на примере нетипового документа "ЗаявкаНаРаботу", разработанного в КА2. Задача: Заменить алгоритм запрета копирования документов для сотрудников с ролью "Стажер",. . .	Доктрина интенционального знания - Доктрина для портала "Срез". Hrethgir 25.07.2026 Может найдётся кто захочет оценить доктрину. . . Написания правил участия для меня роскошь, требующая лимита времени, поэтому все сообщения не прошедшие модерацию будут видны только участникам портала,. . .	сукцессия 44. Решил подать на припринт в межународные сервисы препринтов. Но нужно одобрение от ученых anaschu 25.07.2026 Английский вариант. Пока кто то не одобрит мою личность, мне не получиться это опубликовать на препринте. Но заявку на публикацию статьи я сегодня подам.	сукцессия 43. Вторая научная статья за месяц- прайминг и гатгил anaschu 25.07.2026 две стороны одной монеты