Пункты подменю выпадают за пределы окна браузера

@Dragg0n · Регистрация: 23.09.2015

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

Доброго времени суток. Решил сверстать меню которое автоматически растягивается на всю страницу. Нашел материал, перепробовал кучу материала, получилось то что имею на руках см код. И вот у меня проблема появилась. В предпоследнем меню и скорее всего в последнем (если создать) подменю вылазит за приделы экрана. Как я только не бился так и не смог указать в css что если подменю не входит по ширине, то построить подменю и прижать в право. Так чтобы меню влазило. Помогите пожалуйста!.

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
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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<html>
<head>
<style type="text/css">
.content-menu
    {width: 100%;
    display: -moz-deck;
    display: inline-table;
}
 
.horizontal-multilevel-menu
    {display: table-row;
    margin-top: 50px;}
 
ul.horizontal-multilevel-menu
    {width: 100%;
    border: none;
    list-style: none;
    text-align: left;
    background:#f0f0f0;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f0f0), color-stop(100%,#d6d4d4));
    /* background:-webkit-linear-gradient(top,#f0f0f0 0%,#d6d4d4 100%); */
    background:   -moz-linear-gradient(top,#f0f0f0 0%,#d6d4d4 100%);
    background:    -ms-linear-gradient(top,#f0f0f0 0%,#d6d4d4 100%);
    background:     -o-linear-gradient(top,#f0f0f0 0%,#d6d4d4 100%);
    /* background:        linear-gradient(to bottom, #f0f0f0 0%,#d6d4d4 100%); */
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#d6d4d4',GradientType=0 )}
 
ul {
    line-height: 20px;
    margin: 0 0 10px;
}
 
.content-menu > ul > li{
        display: table-cell;
        margin: 0 -1px 0 0;
        position: relative;
        text-align: center;
}
 
.content-menu a
    {color: #000;
    display: block;
    padding: 13px 0;
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: -0.1px;}
 
.content-menu ul {
    line-height: 20px;
}
 
.content-menu li ul
    {background: none repeat scroll 0 0 #FFFFFF;
    display: none;
    left: 0;
    padding: 0;
    position: absolute;
    top: 100%;
    z-index: 1000;}
 
.content-menu li ul:hover {display: block;}
 
.content-menu ul li.first {border-top: 0 none;}
 
.content-menu ul li a
    {margin: 0;
    white-space: normal;
    font-size: 10.5pt;}
 
.content-menu ul li a:hover {text-decoration: none; color: #fff;}
 
.two_menu a {padding: 4px 0;}
 
.content-menu .two_menu a {color: #000;}
.content-menu .two_menu a:hover {text-decoration: none; color: #f00; font-weight: bold;}
 
.content-menu li:hover ul {display: block; padding: 5px; background: #f5f5f5;}
 
.content-menu li > ul:hover {display: block;}
 
li.leaf 
    {padding: 0.2em 0.5em 0 0;
    margin: 0;}
 
.horizontal-multilevel-menu ul li
    {display: block;
    width: 250px;
    margin: 0 0 -1px 0;
    border: 1px solid #D9D9D9;
    text-align: left;
    line-height: 15px;
    display: block;
    padding:5px 10px;}
 
.content-menu > ul > li:hover
    {padding: 0px;
    z-index: 1002;
    background:#f00}
</style>
</head>
<body style="margin: 0;">
    
    
<div class="content-menu">
    <ul class="horizontal-multilevel-menu">
        <li><a href="/" class="root-item">О машинах</a>
            <ul class="two_menu">
                <li><a href="/">111111111111111111 1111111</a></li>
                <li><a href="/">22222222222222 22222222222</a></li>
            </ul>
        </li>   
        <li><a href="/" class="root-item">Проверка воздуха</a>
            <ul class="two_menu">
                <li><a href="/">111111111111111111 1111111</a></li>
                <li><a href="/">22222222222222 22222222222</a></li>
            </ul>
        </li>   
        <li><a href="/" class="root-item">Земля, лето</a>
            <ul class="two_menu">
                <li><a href="/">111111111111111111 1111111</a></li>
                <li><a href="/">22222222222222 22222222222</a></li>
            </ul>
        <li><a href="/">Печати и отпечатки</a>
            <ul class="two_menu">
                <li><a href="/">111111111111111111 1111111</a></li>
                <li><a href="/">22222222222222 22222222222</a></li>
            </ul>
        </li>   
        <li><a href="/" class="root-item">аппараты от народных Кулибинов</a>
            <ul class="two_menu">
                <li><a href="/">111111111111111111 1111111</a></li>
                <li><a href="/">22222222222222 22222222222</a></li>
            </ul>
        </li>   
        <li><a href="/" class="root-item">Бухгалтерия</a>
            <ul class="two_menu">
                <li><a href="/">111111111111111111 1111111</a></li>
                <li><a href="/">22222222222222 22222222222</a></li>
            </ul>
        </li>   
        <li><a href="/" class="root-item">Налоговое слежение</a></li>  
        <li><a href="/" class="root-item">Автоматизация</a>
            <ul class="two_menu">
                            <li><a href="/">111111111111111111 1111111 1111111 111111</a></li>
                            <li><a href="/">22222222222222 22222222222 222222 22</a></li>
                            <li><a href="/">33333 333333333333 3333333 333333 333333 33333333 33333</a></li>
            </ul>
        </li>
        <li><a href="/" class="root-item">Контакты</a></li>
    </ul>
</div>
<div style="width: 100%;top: 10px;position: relative;">,kf ,kf ,kf ,kf ^)</div>
</body>
</html>

Добавлено через 30 минут
PS глюк виден на мониторе 1280px * 1024px

@Aialonix · 26.05.2016, 14:32

Как мне кажется, решить проблему проще всего с JS. Задать условие, что если появляется скроллбар, то позиционирование в блоке .content-menu li ul менять с left: 0 на right: 0
Ну или же городить кучу кода на CSS, используя медиа-запросы и псевдоклассы.

@Dragg0n · 26.05.2016, 14:41 **[ТС]**

Идея не плохая.... но 2 больших НО 1) я не дружу с js 2) Я стараюсь обойтись без этого так как если у пользователя не отрабатывается js браузером (стоковые это особенно любят) или пользователь отрубил то и фигня вылезит - вод только по этому нет.

Добавлено через 2 минуты
Блин ка-кто сложно. Есть css от похожего меню там решено это способом - заключили второе подменю в <div> и ему в определенный момент просто присвоили автоматом отступ с права через сss - а как понять не могу.....

@mrtoxas · 26.05.2016, 16:20

А куда оно должно открываться то подменю?

Можно последнее и предпоследнее выпадающее подменю выровнять по правому краю:

CSS
1
2
  position: absolute;
  right:0;

@Fedor92 · 26.05.2016, 16:24

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

PS глюк виден на мониторе 1280px * 1024px

Не хочу Вас расстраивать, но Ваша вёрстка годится только для разрешения 1920px...

ИМХО, не верна концепция самой вёрстки пункты меню слишком громоздкие и длинные от этого и проблемы...

@Dragg0n · 27.05.2016, 07:58 **[ТС]**

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

А куда оно должно открываться то подменю?

Можно последнее и предпоследнее выпадающее подменю выровнять по правому краю:

CSS
1
2
  position: absolute;
  right:0;

Это пробовал использовать, тут 2 нюанса. 1) Работает если применить к .content-menu li ul подменю. Как видно из кода второе подменю Li не имеет классов? и это приводит плавно к второй проблеме... 2) меню для простаты показан сформированным в виде html изначально его строит php. И если просто применить то получают данный css все подвкладки. И тогда начинают не корректно выглядеть первые два меню

Тогда нужна простая формула php которая каждой подменю присвоит индивидуальный class и по нему я смогу в css применить нужное на две последние....

Может сможешь формулу подсказать на php которая увеличивает цифру на 1

HTML5
1
<ul class="two_menu<? --- и тут формула +1 ---- ?>"></ul>

Чтобы получилось в итоге подменю

HTML5
1
2
3
4
<ul class="two_menu 0"></ul>
<ul class="two_menu 1"></ul>
<ul class="two_menu 2"></ul>
<ul class="two_menu 3"></ul>

Добавлено через 10 минут

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

Не хочу Вас расстраивать, но Ваша вёрстка годится только для разрешения 1920px...

ИМХО, не верна концепция самой вёрстки пункты меню слишком громоздкие и длинные от этого и проблемы...

Извини, если огорчил Но я думаю по css видно, что меню еще сырое и не оптимизировано под разные экраны и браузеры, хотя-бы потому, что шрифт указан не в пикселях не в % а в pt, отсутствует @Media min-width & max-width
и прочие. Появилась проблема я ее решаю тут. Но меню сностно смотрится и работает уже в 1280*1204 в хроме, опере, фаирфоксе _ БЕЗ УКАЗАННЫХ ВАМИ БАГОВ. Но я проверю как дойдет очередь.

Добавлено через 23 минуты
Все спасибо, буду пробовать нашел php для класса

HTML5
1
<?$i++ ?><ul class="two_menu<?=$i?>">

Добавлено через 24 минуты

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

Ваша вёрстка годится только для разрешения 1920px... ИМХО

Если у вас слишком большой монитор то все токи советую давно обратить внимание на фаирфокс - режим отладки - выставление страницы под нужный размер. Выглядит так!

Добавлено через 32 минуты
Все работает отлично, но столкнулся с громоздким CSS помогите сократить.

Изначально

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.content-menu .two_menu1 a {color: #000;}
.content-menu .two_menu1 a:hover {text-decoration: none; color: #f00; font-weight: bold;}
.content-menu .two_menu2 a {color: #000;}
.content-menu .two_menu2 a:hover {text-decoration: none; color: #f00; font-weight: bold;}
.content-menu .two_menu3 a {color: #000;}
.content-menu .two_menu3 a:hover {text-decoration: none; color: #f00; font-weight: bold;}
.content-menu .two_menu4 a {color: #000;}
.content-menu .two_menu4 a:hover {text-decoration: none; color: #f00; font-weight: bold;}
.content-menu .two_menu5 a {color: #000;}
.content-menu .two_menu5 a:hover {text-decoration: none; color: #f00; font-weight: bold;}
.content-menu .two_menu6 a {color: #000;}
.content-menu .two_menu6 a:hover {text-decoration: none; color: #f00; font-weight: bold;}
.content-menu .two_menu7 a {color: #000;}
.content-menu .two_menu7 a:hover {text-decoration: none; color: #f00; font-weight: bold;}
.content-menu .two_menu8 a {color: #000;}
.content-menu .two_menu8 a:hover {text-decoration: none; color: #f00; font-weight: bold;}
.content-menu .two_menu9 a {color: #000;}
.content-menu .two_menu9 a:hover {text-decoration: none; color: #f00; font-weight: bold;}

Ужал до

CSS
1
2
.content-menu .two_menu1 a, .content-menu .two_menu2 a, .content-menu .two_menu3 a, .content-menu .two_menu4 a, .content-menu .two_menu5 a, .content-menu .two_menu6 a, .content-menu .two_menu7 a, .content-menu .two_menu8 a, .content-menu .two_menu9 a {color: #000;}
.content-menu .two_menu1 a:hover, .content-menu .two_menu2 a:hover, .content-menu .two_menu3 a:hover, .content-menu .two_menu4 a:hover, .content-menu .two_menu5 a:hover, .content-menu .two_menu6 a:hover, .content-menu .two_menu7 a:hover, .content-menu .two_menu8 a:hover, .content-menu .two_menu9 a:hover {text-decoration: none; color: #f00; font-weight: bold;}

А можно как-то еще короче написать?

@mrtoxas · 27.05.2016, 10:15

Можно так:

CSS
1
2
3
.content-menu [class^="two_menu"]{
....
}

Стили применятся ко всем элементам, которые находятся внутри .content-menu, и наименование классов которых начинается с "two_menu"

Добавлено через 4 минуты
Для данного случая:

CSS
1
2
3
4
5
6
7
8
.content-menu [class^="two_menu"] a{
  color:#000;
}
.content-menu [class^="two_menu"] a:hover {
  text-decoration: none; 
  color: #f00; 
  font-weight: bold;
}

@Fedor92 · 27.05.2016, 10:29

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

Если у вас слишком большой монитор то все токи советую давно обратить внимание на фаирфокс - режим отладки - выставление страницы под нужный размер. Выглядит так!

Не поленился сделал скрины... Продолжайте хамить... В фаерфоксе, кстати, даже на 1920 меню вылазит за пределы экрана...

@Dragg0n · 06.06.2016, 08:47 **[ТС]**

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

Продолжайте хамить...

Я не хамил, а а ответил с внесением пояснения + предложения

))))

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

В фаерфоксе, кстати, даже на 1920 меню вылазит за пределы экрана...

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

))

Решилось банально просто, присвоил каждому меню в коде php индивидуальный class - последним двум подменю прописал другие class-ы - Тема закрыта вопрос побежден.... Вы начали изначально говорить, что сырое меню работает криво даже под мего размером, причем по началу я вас понял, что само горизонтальное криво растягивается... А с вертикальным выпадающим кривым я и без вас знал о проблеме и обратился за советом на форум. И теперь видя ваши скриншоты я понял, что это Вы не правильно мой вопрос прочитали.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .

@Aialonix 22 / 22 / 3 Регистрация: 24.06.2013 Сообщений: 177
	26.05.2016, 14:32
	Как мне кажется, решить проблему проще всего с JS. Задать условие, что если появляется скроллбар, то позиционирование в блоке .content-menu li ul менять с left: 0 на right: 0 Ну или же городить кучу кода на CSS, используя медиа-запросы и псевдоклассы. 0

@Dragg0n 0 / 0 / 1 Регистрация: 23.09.2015 Сообщений: 43
	26.05.2016, 14:41 [ТС]
	Идея не плохая.... но 2 больших НО 1) я не дружу с js 2) Я стараюсь обойтись без этого так как если у пользователя не отрабатывается js браузером (стоковые это особенно любят) или пользователь отрубил то и фигня вылезит - вод только по этому нет. Добавлено через 2 минуты Блин ка-кто сложно. Есть css от похожего меню там решено это способом - заключили второе подменю в <div> и ему в определенный момент просто присвоили автоматом отступ с права через сss - а как понять не могу..... 0