Как убрать щели между вертикальными подпунктами меню?

@morda77 · Регистрация: 22.12.2012

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

Есть сайт: http://www.mojweb.org/celplast/
Между выпадающими подпунктами меню в левой колонке щели между некоторыми пунктами, и левая колонка за счет этого величина в высоту. См скрин.
Кто-нибудь знает, как это исправить?
Спасибо.

@ns16 · 12.11.2015, 14:37

Уберите float: left из правила .mj-mainnav.navbar .nav > li ul.nav-child li, тогда ваш выпадающий список выстроится в одну колонку и зазоры между подпунктами исчезнут.

@morda77 · 12.11.2015, 14:41 **[ТС]**

ns16, дело в том, что мне нужно 2 колонки. А может быть и три потом.

@ns16 · 12.11.2015, 14:50

Если бы высота подпунктов была одинаковая, можно было выровнять их горизонтально и выстроить в две-три колонки с помощью display: inline-block, но раз их высота разная, я бы на вашем месте сделал каждую колонку отдельным списком ul с подпунктами li.

@morda77 · 12.11.2015, 14:52 **[ТС]**

ns16, а можете поподробнее?
Спасибо.

@ns16 · 12.11.2015, 18:59

Предлагаю вам сделать что-то вроде этого.

@morda77 · 12.11.2015, 23:32 **[ТС]**

ns16, какое-то все кривое там.)

Добавлено через 11 минут
ns16, у меня там такой стиль:

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
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
.nav {
    margin-bottom: 18px;
    margin-left: 0;
    list-style: none;
}
.nav > li > a {
    display: block;
}
.nav > li > a:hover {
    text-decoration: none;
    background-color: #eeeeee;
}
.navbar {
*position: relative;
*z-index: 2;
    margin-bottom: 18px;
    overflow: visible;
}
.navbar-inner {
    min-height: 40px;
    background-image: url("../images/gradient-header-bg.png");
    background: none repeat scroll 0 0 transparent;
    background-image: -moz-linear-gradient(top, #333333, #222222);
    background-image: -ms-linear-gradient(top, #333333, #222222);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222));
    background-image: -webkit-linear-gradient(top, #333333, #222222);
    background-image: -o-linear-gradient(top, #333333, #222222);
    background-image: linear-gradient(top, #333333, #222222);
    background-repeat: repeat-x;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}
.navbar .container {
    width: -moz-fit-content !important;
    margin: auto !important;
}
.nav-collapse.collapse {
    height: auto;
}
.navbar {
    color: #999999;
    width: 100% !important;
}
.navbar ul.nav {
    position: relative !important;
    left: 0 !important;
    display: block !important;
    margin: 0 0px 0 0;
    padding: 0px !important;
}
 
 
.navbar .nav > li {
    display: block;
    float: left;
}
 
.navbar .nav > li > a {
    float: none;
    padding: 9px 10px 11px;
    line-height: 19px;
    color: #999999;
    text-decoration: none;
}
.navbar .btn {
    display: inline-block;
    padding: 4px 10px 4px;
    margin: 5px 5px 6px;
    line-height: 18px;
}
.navbar .nav > li > a:hover {
    color: #ffffff;
    text-decoration: none;
    background-color: transparent;
}
.navbar .nav .active > a, .navbar .nav .active > a:hover {
    color: #ffffff;
    text-decoration: none;
    background-color: #222222;
}
.navbar .btn-navbar {
    display: none;
    float: right;
    padding: 7px 10px;
    margin-right: 5px;
    margin-left: 5px;
    background-color: #2c2c2c;
*background-color: #222222;
    background-image: -ms-linear-gradient(top, #333333, #222222);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222));
    background-image: -webkit-linear-gradient(top, #333333, #222222);
    background-image: -o-linear-gradient(top, #333333, #222222);
    background-image: linear-gradient(top, #333333, #222222);
    background-image: -moz-linear-gradient(top, #333333, #222222);
    background-repeat: repeat-x;
    border-color: #222222 #222222 #000000;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
}
.navbar .btn-navbar:hover, .navbar .btn-navbar:active, .navbar .btn-navbar.active, .navbar .btn-navbar.disabled, .navbar .btn-navbar[disabled] {
    background-color: #222222;
*background-color: #151515;
}
.navbar .btn-navbar:active, .navbar .btn-navbar.active {
    background-color: #080808 \9;
}
.hide {
    display: none;
}
.show {
    display: block;
}
.invisible {
    visibility: hidden;
}
 
ul.nav-child {
    display: none;
    border-top: 1px solid #f0f0f0;
    width: 390px;
}
.mj-mainnav.navbar .nav > li {
    position: relative;
}
.mj-mainnav.navbar .nav > li:hover > ul.nav-child {
    display: block;
    position: absolute;
    z-index: 100;
}

Вот бы его подправить, да где, не пойму.

@ns16 · 13.11.2015, 07:28

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

какое-то все кривое там.)

Если вы имеете в виду, что колонки разной высоты, то в вашем случае приходится выбирать - либо щели между подпунктами, либо разная высота колонок. Кстати, чтобы визуально это не бросалось в глаза, можно для списка задать цвет фона такой же, как и для подпунктов.

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

у меня там такой стиль

Скиньте еще html-код. Возможно, я смогу вам помочь.

@morda77 · 13.11.2015, 13:42 **[ТС]**

ns16, Спасибо. Вот код: http://pastebin.com/xQ4JvNEt

Сайт на Joomla 3.

@morda77 · 14.11.2015, 23:31 **[ТС]**

И тишина.)

Новые блоги и статьи Все статьи Все блоги /
Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .

@morda77 24 / 24 / 10 Регистрация: 22.12.2012 Сообщений: 2,712

	Как убрать щели между вертикальными подпунктами меню? 12.11.2015, 13:34. Показов 1271. Ответов 9 Метки нет (Все метки) Есть сайт: http://www.mojweb.org/celplast/ Между выпадающими подпунктами меню в левой колонке щели между некоторыми пунктами, и левая колонка за счет этого величина в высоту. См скрин. Кто-нибудь знает, как это исправить? Спасибо. Миниатюры 0

@ns16 94 / 94 / 68 Регистрация: 26.03.2015 Сообщений: 248
	12.11.2015, 14:37
	Уберите float: left из правила .mj-mainnav.navbar .nav > li ul.nav-child li, тогда ваш выпадающий список выстроится в одну колонку и зазоры между подпунктами исчезнут. 0

@morda77 24 / 24 / 10 Регистрация: 22.12.2012 Сообщений: 2,712
	12.11.2015, 14:41 [ТС]
	ns16, дело в том, что мне нужно 2 колонки. А может быть и три потом. 0

@ns16 94 / 94 / 68 Регистрация: 26.03.2015 Сообщений: 248
	12.11.2015, 14:50
	Если бы высота подпунктов была одинаковая, можно было выровнять их горизонтально и выстроить в две-три колонки с помощью display: inline-block, но раз их высота разная, я бы на вашем месте сделал каждую колонку отдельным списком ul с подпунктами li. 0

@morda77 24 / 24 / 10 Регистрация: 22.12.2012 Сообщений: 2,712
	12.11.2015, 14:52 [ТС]
	ns16, а можете поподробнее? Спасибо. 0

@ns16 94 / 94 / 68 Регистрация: 26.03.2015 Сообщений: 248
	12.11.2015, 18:59
	Предлагаю вам сделать что-то вроде этого. 0

@morda77 24 / 24 / 10 Регистрация: 22.12.2012 Сообщений: 2,712
	13.11.2015, 13:42 [ТС]
	ns16, Спасибо. Вот код: http://pastebin.com/xQ4JvNEt Сайт на Joomla 3. 0

@morda77 24 / 24 / 10 Регистрация: 22.12.2012 Сообщений: 2,712
	14.11.2015, 23:31 [ТС]
	И тишина.) 0