Имеется выпадающее меню, при ховере на вложенный пункт меню, если этих пунктов много и они выходят вниз за экран, должна появиться вертикальная прокрутка.
Подскажите, как сделать вертикальную прокрутку?
Можно добавить max-height:
для sub-menu
, но высота экрана ведь меняется на разных экранах
https://jsfiddle.net/vosh67kh/
P.S. подскажите, а как теперь сделать такое же, но только на уровень выше?
Если прописать эти же стили для всех ul
, то получается такое
https://jsfiddle.net/vosh67kh/3/
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
margin: 0;
padding: 0;
border: 0;
outline: 0;
background: transparent;
font-size: 100%;
vertical-align: baseline;
}
ol, ul {
list-style: none;
}
article, aside, footer, header, hgroup, nav, section {
display: block;
}
#top-menu-nav, #top-menu {
line-height: 0;
}
.container {
position: relative;
width: 80%;
max-width: 1080px;
margin: auto;
}
.container {
position: relative;
text-align: left;
}
.clearfix::after {
display: block;
visibility: hidden;
clear: both;
height: 0px;
font-size: 0px;
content: " ";
}
.clearfix::after {
visibility: hidden;
display: block;
font-size: 0px;
content: " ";
clear: both;
height: 0px;
}
#main-header {
-webkit-transition: background-color 0.4s, color 0.4s, transform 0.4s, opacity 0.4s ease-in-out;
-moz-transition: background-color 0.4s, color 0.4s, transform 0.4s, opacity 0.4s ease-in-out;
transition: background-color 0.4s, color 0.4s, transform 0.4s, opacity 0.4s ease-in-out;
}
body {
line-height: 1;
}
.nav li {
position: relative;
line-height: 1em;
}
.nav li li {
margin: 0;
padding: 0 20px;
}
.nav li li {
position: relative;
line-height: 2em;
}
#et-secondary-menu li, #top-menu li {
word-wrap: break-word;
}
#top-menu li {
display: inline-block;
padding-right: 22px;
font-size: 14px;
}
#top-menu > li:last-child {
padding-right: 0px;
}
a {
color: #2ea3f2;
text-decoration: none;
}
:focus {
outline: 0;
}
.et_color_scheme_green a {
color: #7cc68d;
}
.page_item a {
font-weight: 400 !important;
}
.nav li li a, .et_mobile_menu li a {
font-size: 14px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
#top-menu a {
display: block;
position: relative;
color: rgba(0, 0, 0, 0.6);
text-decoration: none;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
#top-menu li a {
font-size: 13px;
}
.nav li ul {
position: absolute;
padding: 20px 0;
}
.nav li:hover {
visibility: inherit;
}
.nav li:hover > ul {
visibility: visible;
opacity: 1;
}
.nav li ul {
visibility: hidden;
z-index: 9999;
width: 240px;
border-top: 3px solid #2ea3f2;
opacity: 0;
background: #fff;
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
box-shadow: 0px 2px 5px rgba(0,0,0,0.1);
}
.nav li ul {
text-align: left;
-webkit-transform: translate3d(0, 0, 0);
}
.nav li ul {
border-color: #48a400;
}
.nav ul .sub-menu{
overflow-y: scroll;
}
.nav li li ul {
z-index: 1000;
top: -23px;
left: 240px;
}
#top-menu li li {
margin: 0;
padding: 0 20px;
}
#top-menu li li a {
width: 200px;
padding: 6px 20px;
}
#top-menu li .menu-item-has-children > a:first-child::after {
top: 6px;
right: 20px;
}
<nav id="top-menu-nav">
<ul class="nav" id="top-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-340"
id="menu-item-340"><a href="http://orangemed.testing-elit.ru/o-tsentre/">О центре</a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-367"
id="menu-item-367"><a href="http://orangemed.testing-elit.ru/o-tsentre/novosti/">Новости</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-386"
id="menu-item-386"><a
href="http://orangemed.testing-elit.ru/o-tsentre/nashi-doktora/">Врачи</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-389"
id="menu-item-389"><a
href="http://orangemed.testing-elit.ru/o-tsentre/politika-konfidentsialnosti/">Политика
конфиденциальности</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-402"
id="menu-item-402"><a
href="http://orangemed.testing-elit.ru/o-tsentre/normativnye-akty/">Нормативные
акты</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-711"
id="menu-item-711"><a href="http://orangemed.testing-elit.ru/o-tsentre/litsenzii/">Лицензии</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-410"
id="menu-item-410"><a
href="http://orangemed.testing-elit.ru/o-tsentre/kontroliruyushhie-organy/">Контролирующие
органы</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-420"
id="menu-item-420"><a
href="http://orangemed.testing-elit.ru/o-tsentre/klyatva-gippokrata/">Клятва
Гиппократа</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-426"
id="menu-item-426"><a href="http://orangemed.testing-elit.ru/o-tsentre/rekvizity/">Реквизиты</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-373"
id="menu-item-373"><a href="http://orangemed.testing-elit.ru/o-tsentre/vakansii/">Вакансии</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-812"
id="menu-item-812"><a
href="http://orangemed.testing-elit.ru/o-tsentre/raspisanie-vrachej/">Расписание
врачей</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-769"
id="menu-item-769"><a href="http://orangemed.testing-elit.ru/uslugi/">Услуги</a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-510"
id="menu-item-510"><a
href="http://orangemed.testing-elit.ru/uslugi/massazh/">Массаж</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-512"
id="menu-item-512"><a
href="http://orangemed.testing-elit.ru/uslugi/vaktsinoprofilaktika/">Вакцинопрофилактика</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-766"
id="menu-item-766"><a href="http://orangemed.testing-elit.ru/diagnostika/">Диагностика</a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-878"
id="menu-item-878"><a href="http://orangemed.testing-elit.ru/diagnostika/analizy/">Анализы</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-506 current_page_item menu-item-has-children menu-item-511"
id="menu-item-511"><a
href="http://orangemed.testing-elit.ru/diagnostika/ultrazvukovaya-diagnostika/">Ультразвуковая
диагностика</a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1087"
id="menu-item-1087"><a
href="http://orangemed.testing-elit.ru/diagnostika/ultrazvukovaya-diagnostika/uzi-na-opredelenie-pola-rebenka/">УЗИ
на определение пола ребенка</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-page-parent menu-item-1397"
id="menu-item-1397"><a href="http://orangemed.testing-elit.ru/diagnostika/">Диагностика</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1084"
id="menu-item-1084"><a
href="http://orangemed.testing-elit.ru/diagnostika/ultrazvukovaya-diagnostika/uzi-beremennosti-4d/">УЗИ
беременности 4D с допплерометрией</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1079"
id="menu-item-1079"><a
href="http://orangemed.testing-elit.ru/diagnostika/ultrazvukovaya-diagnostika/uzi-beremennosti-3-trimestr/">УЗИ
беременности III триместр</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1047"
id="menu-item-1047"><a
href="http://orangemed.testing-elit.ru/diagnostika/ultrazvukovaya-diagnostika/uzi-beremennosti-ii-trimestr/">УЗИ
беременности II триместр</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1042"
id="menu-item-1042"><a
href="http://orangemed.testing-elit.ru/diagnostika/ultrazvukovaya-diagnostika/uzi-beremennosti-na-rannih-srokah/">УЗИ
беременности I триместр</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1036"
id="menu-item-1036"><a
href="http://orangemed.testing-elit.ru/diagnostika/ultrazvukovaya-diagnostika/uzi-dlya-opredeleniya-beremennosti/">УЗИ
для определения беременности</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1033"
id="menu-item-1033"><a
href="http://orangemed.testing-elit.ru/diagnostika/ultrazvukovaya-diagnostika/uzi-lonnogo-sochleneniya/">УЗИ
лонного сочленения</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1028"
id="menu-item-1028"><a
href="http://orangemed.testing-elit.ru/diagnostika/ultrazvukovaya-diagnostika/uzi-matki/">УЗИ
матки</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1023"
id="menu-item-1023"><a
href="http://orangemed.testing-elit.ru/diagnostika/ultrazvukovaya-diagnostika/uzi-organov-malogo-taza/">УЗИ
органов малого таза</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1015"
id="menu-item-1015"><a
href="http://orangemed.testing-elit.ru/diagnostika/ultrazvukovaya-diagnostika/uzi-plevralnoj-polosti/">УЗИ
легких</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1012"
id="menu-item-1012"><a
href="http://orangemed.testing-elit.ru/diagnostika/ultrazvukovaya-diagnostika/uzi-na-nalichie-svobodnoj-zhidkosti/">УЗИ
на наличие свободной жидкости</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-913"
id="menu-item-913"><a
href="http://orangemed.testing-elit.ru/diagnostika/ultrazvukovaya-diagnostika/uzi-selezenki/">УЗИ
селезенки</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-908"
id="menu-item-908"><a
href="http://orangemed.testing-elit.ru/diagnostika/ultrazvukovaya-diagnostika/uzi-podzheludochnoj-zhelezy/">УЗИ
поджелудочной железы</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-903"
id="menu-item-903"><a
href="http://orangemed.testing-elit.ru/diagnostika/ultrazvukovaya-diagnostika/uzi-zhelchnogo-puzyrya/">УЗИ
желчного пузыря</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-894"
id="menu-item-894"><a
href="http://orangemed.testing-elit.ru/diagnostika/ultrazvukovaya-diagnostika/uzi-pecheni/">УЗИ
печени</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-887"
id="menu-item-887"><a
href="http://orangemed.testing-elit.ru/diagnostika/ultrazvukovaya-diagnostika/uzi-bryushnoj-polosti/">УЗИ
брюшной полости</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1225"
id="menu-item-1225"><a
href="http://orangemed.testing-elit.ru/diagnostika/ultrazvukovaya-diagnostika/uzi-organov-moshonki/">УЗИ
органов мошонки</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1226"
id="menu-item-1226"><a
href="http://orangemed.testing-elit.ru/diagnostika/ultrazvukovaya-diagnostika/truzi-predstatelnoj-zhelezy/">ТРУЗИ
предстательной железы</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1227"
id="menu-item-1227"><a
href="http://orangemed.testing-elit.ru/diagnostika/ultrazvukovaya-diagnostika/uzi-ostatochnoj-mochi/">УЗИ
остаточной мочи</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1228"
id="menu-item-1228"><a
href="http://orangemed.testing-elit.ru/diagnostika/ultrazvukovaya-diagnostika/uzi-mochevogo-puzyrya/">УЗИ
мочевого пузыря</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1398"
id="menu-item-1398"><a
href="http://orangemed.testing-elit.ru/diagnostika/analizy/">Анализы</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1400"
id="menu-item-1400"><a
href="http://orangemed.testing-elit.ru/otdeleniya/vzrosloe-otdelenie/">Взрослое
отделение</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1399"
id="menu-item-1399"><a href="http://orangemed.testing-elit.ru/otdeleniya/">Отделения</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1401"
id="menu-item-1401"><a
href="http://orangemed.testing-elit.ru/otdeleniya/detskoe-otdelenie/">Детское
отделение</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1229"
id="menu-item-1229"><a
href="http://orangemed.testing-elit.ru/diagnostika/ultrazvukovaya-diagnostika/uzi-pochek/">УЗИ
почек</a></li>
</ul>
</li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-543"
id="menu-item-543"><a href="http://orangemed.testing-elit.ru/tsenu/">Цены</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-363"
id="menu-item-363"><a href="http://orangemed.testing-elit.ru/aktsii/">Акции</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-364"
id="menu-item-364"><a href="http://orangemed.testing-elit.ru/programmy/">Программы</a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-478"
id="menu-item-478"><a
href="http://orangemed.testing-elit.ru/programmy/vedenie-beremennosti/">Ведение
беременности</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-477"
id="menu-item-477"><a
href="http://orangemed.testing-elit.ru/programmy/deti-do-1-goda/">Дети до 1
года</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-476"
id="menu-item-476"><a
href="http://orangemed.testing-elit.ru/programmy/deti-ot-1-do-3/">Дети от 1 до
3</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-475"
id="menu-item-475"><a
href="http://orangemed.testing-elit.ru/programmy/deti-ot-4-do-7/">Дети от 4 до
7</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-474"
id="menu-item-474"><a href="http://orangemed.testing-elit.ru/programmy/shkolniki/">Школьники</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-366"
id="menu-item-366"><a href="http://orangemed.testing-elit.ru/otdeleniya/">Отделения</a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-514"
id="menu-item-514"><a
href="http://orangemed.testing-elit.ru/otdeleniya/vzrosloe-otdelenie/">Взрослое
отделение</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-513"
id="menu-item-513"><a
href="http://orangemed.testing-elit.ru/otdeleniya/detskoe-otdelenie/">Детское
отделение</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-368"
id="menu-item-368"><a href="http://orangemed.testing-elit.ru/kontakty/">Контакты</a></li>
</ul>
</nav>
Самое простое без js например вот так: замените способ появление элемента с visibility/opacity
на display
, чтобы не считать размер экрана с помощью js опирайтесь на приблизительные vh
:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend {
margin: 0;
padding: 0;
border: 0;
outline: 0;
background: transparent;
font-size: 100%;
vertical-align: baseline;
}
ol,
ul {
list-style: none;
}
article,
aside,
footer,
header,
hgroup,
nav,
section {
display: block;
}
#top-menu-nav,
#top-menu {
line-height: 0;
}
.container {
position: relative;
width: 80%;
max-width: 1080px;
margin: auto;
}
.container {
position: relative;
text-align: left;
}
.clearfix::after {
display: block;
visibility: hidden;
clear: both;
height: 0px;
font-size: 0px;
content: " ";
}
.clearfix::after {
visibility: hidden;
display: block;
font-size: 0px;
content: " ";
clear: both;
height: 0px;
}
#main-header {
-webkit-transition: background-color 0.4s, color 0.4s, transform 0.4s, opacity 0.4s ease-in-out;
-moz-transition: background-color 0.4s, color 0.4s, transform 0.4s, opacity 0.4s ease-in-out;
transition: background-color 0.4s, color 0.4s, transform 0.4s, opacity 0.4s ease-in-out;
}
body {
line-height: 1;
}
.nav li {
position: relative;
line-height: 1em;
}
.nav li li {
margin: 0;
padding: 0 20px;
}
.nav li li {
position: relative;
line-height: 2em;
}
#et-secondary-menu li,
#top-menu li {
word-wrap: break-word;
}
#top-menu li {
display: inline-block;
padding-right: 22px;
font-size: 14px;
}
#top-menu>li:last-child {
padding-right: 0px;
}
a {
color: #2ea3f2;
text-decoration: none;
}
:focus {
outline: 0;
}
.et_color_scheme_green a {
color: #7cc68d;
}
.page_item a {
font-weight: 400 !important;
}
.nav li li a,
.et_mobile_menu li a {
font-size: 14px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
#top-menu a {
display: block;
position: relative;
color: rgba(0, 0, 0, 0.6);
text-decoration: none;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
#top-menu li a {
font-size: 13px;
}
.nav li ul {
position: absolute;
padding: 20px 0;
}
.nav li ul {
display: none;
z-index: 9999;
width: 240px;
border-top: 3px solid #2ea3f2;
background: #fff;
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}
.nav li ul {
text-align: left;
-webkit-transform: translate3d(0, 0, 0);
}
.nav li ul {
border-color: #48a400;
}
.nav li li ul {
z-index: 1000;
top: -23px;
left: 240px;
}
#top-menu li li {
margin: 0;
padding: 0 20px;
}
#top-menu li li a {
width: 200px;
padding: 6px 20px;
}
#top-menu li .menu-item-has-children>a:first-child::after {
top: 6px;
right: 20px;
}
/*new*/
.sub-menu {
position: absolute;
height: auto;
max-height: 75vh;
}
li:hover>ul {
display: block;
}
.sub-menu .sub-menu{
max-height: 65vh;
overflow-y:auto;
}
<nav id="top-menu-nav">
<ul class="nav" id="top-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-340" id="menu-item-340"><a href="http://orangemed.testing-elit.ru/o-tsentre/">О центре</a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-367" id="menu-item-367"><a href="http://orangemed.testing-elit.ru/o-tsentre/novosti/">Новости</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-386" id="menu-item-386"><a href="http://orangemed.testing-elit.ru/o-tsentre/nashi-doktora/">Врачи</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-389" id="menu-item-389"><a href="http://orangemed.testing-elit.ru/o-tsentre/politika-konfidentsialnosti/">Политика
конфиденциальности</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-402" id="menu-item-402"><a href="http://orangemed.testing-elit.ru/o-tsentre/normativnye-akty/">Нормативные
акты</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-711" id="menu-item-711"><a href="http://orangemed.testing-elit.ru/o-tsentre/litsenzii/">Лицензии</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-410" id="menu-item-410"><a href="http://orangemed.testing-elit.ru/o-tsentre/kontroliruyushhie-organy/">Контролирующие
органы</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-420" id="menu-item-420"><a href="http://orangemed.testing-elit.ru/o-tsentre/klyatva-gippokrata/">Клятва
Гиппократа</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-426" id="menu-item-426"><a href="http://orangemed.testing-elit.ru/o-tsentre/rekvizity/">Реквизиты</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-373" id="menu-item-373"><a href="http://orangemed.testing-elit.ru/o-tsentre/vakansii/">Вакансии</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-812" id="menu-item-812"><a href="http://orangemed.testing-elit.ru/o-tsentre/raspisanie-vrachej/">Расписание
врачей</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-769" id="menu-item-769"><a href="http://orangemed.testing-elit.ru/uslugi/">Услуги</a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-510" id="menu-item-510"><a href="http://orangemed.testing-elit.ru/uslugi/massazh/">Массаж</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-512" id="menu-item-512"><a href="http://orangemed.testing-elit.ru/uslugi/vaktsinoprofilaktika/">Вакцинопрофилактика</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-766" id="menu-item-766"><a href="http://orangemed.testing-elit.ru/diagnostika/">Диагностика</a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-878" id="menu-item-878"><a href="http://orangemed.testing-elit.ru/diagnostika/analizy/">Анализы</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-506 current_page_item menu-item-has-children menu-item-511" id="menu-item-511"><a href="http://orangemed.testing-elit.ru/diagnostika/ultrazvukovaya-diagnostika/">Ультразвуковая
диагностика</a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1087" id="menu-item-1087"><a href="http://orangemed.testing-elit.ru/diagnostika/ultrazvukovaya-diagnostika/uzi-na-opredelenie-pola-rebenka/">УЗИ
на определение пола ребенка</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-page-parent menu-item-1397" id="menu-item-1397"><a href="http://orangemed.testing-elit.ru/diagnostika/">Диагностика</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1084" id="menu-item-1084"><a href="http://orangemed.testing-elit.ru/diagnostika/ultrazvukovaya-diagnostika/uzi-beremennosti-4d/">УЗИ
беременности 4D с допплерометрией</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1079" id="menu-item-1079"><a href="http://orangemed.testing-elit.ru/diagnostika/ultrazvukovaya-diagnostika/uzi-beremennosti-3-trimestr/">УЗИ
беременности III триместр</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1047" id="menu-item-1047"><a href="http://orangemed.testing-elit.ru/diagnostika/ultrazvukovaya-diagnostika/uzi-beremennosti-ii-trimestr/">УЗИ
беременности II триместр</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1042" id="menu-item-1042"><a href="http://orangemed.testing-elit.ru/diagnostika/ultrazvukovaya-diagnostika/uzi-beremennosti-na-rannih-srokah/">УЗИ
беременности I триместр</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1036" id="menu-item-1036"><a href="http://orangemed.testing-elit.ru/diagnostika/ultrazvukovaya-diagnostika/uzi-dlya-opredeleniya-beremennosti/">УЗИ
для определения беременности</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1033" id="menu-item-1033"><a href="http://orangemed.testing-elit.ru/diagnostika/ultrazvukovaya-diagnostika/uzi-lonnogo-sochleneniya/">УЗИ
лонного сочленения</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1028" id="menu-item-1028"><a href="http://orangemed.testing-elit.ru/diagnostika/ultrazvukovaya-diagnostika/uzi-matki/">УЗИ
матки</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1023" id="menu-item-1023"><a href="http://orangemed.testing-elit.ru/diagnostika/ultrazvukovaya-diagnostika/uzi-organov-malogo-taza/">УЗИ
органов малого таза</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1015" id="menu-item-1015"><a href="http://orangemed.testing-elit.ru/diagnostika/ultrazvukovaya-diagnostika/uzi-plevralnoj-polosti/">УЗИ
легких</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1012" id="menu-item-1012"><a href="http://orangemed.testing-elit.ru/diagnostika/ultrazvukovaya-diagnostika/uzi-na-nalichie-svobodnoj-zhidkosti/">УЗИ
на наличие свободной жидкости</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-913" id="menu-item-913"><a href="http://orangemed.testing-elit.ru/diagnostika/ultrazvukovaya-diagnostika/uzi-selezenki/">УЗИ
селезенки</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-908" id="menu-item-908"><a href="http://orangemed.testing-elit.ru/diagnostika/ultrazvukovaya-diagnostika/uzi-podzheludochnoj-zhelezy/">УЗИ
поджелудочной железы</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-903" id="menu-item-903"><a href="http://orangemed.testing-elit.ru/diagnostika/ultrazvukovaya-diagnostika/uzi-zhelchnogo-puzyrya/">УЗИ
желчного пузыря</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-894" id="menu-item-894"><a href="http://orangemed.testing-elit.ru/diagnostika/ultrazvukovaya-diagnostika/uzi-pecheni/">УЗИ
печени</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-887" id="menu-item-887"><a href="http://orangemed.testing-elit.ru/diagnostika/ultrazvukovaya-diagnostika/uzi-bryushnoj-polosti/">УЗИ
брюшной полости</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1225" id="menu-item-1225"><a href="http://orangemed.testing-elit.ru/diagnostika/ultrazvukovaya-diagnostika/uzi-organov-moshonki/">УЗИ
органов мошонки</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1226" id="menu-item-1226"><a href="http://orangemed.testing-elit.ru/diagnostika/ultrazvukovaya-diagnostika/truzi-predstatelnoj-zhelezy/">ТРУЗИ
предстательной железы</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1227" id="menu-item-1227"><a href="http://orangemed.testing-elit.ru/diagnostika/ultrazvukovaya-diagnostika/uzi-ostatochnoj-mochi/">УЗИ
остаточной мочи</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1228" id="menu-item-1228"><a href="http://orangemed.testing-elit.ru/diagnostika/ultrazvukovaya-diagnostika/uzi-mochevogo-puzyrya/">УЗИ
мочевого пузыря</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1398" id="menu-item-1398"><a href="http://orangemed.testing-elit.ru/diagnostika/analizy/">Анализы</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1400" id="menu-item-1400"><a href="http://orangemed.testing-elit.ru/otdeleniya/vzrosloe-otdelenie/">Взрослое
отделение</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1399" id="menu-item-1399"><a href="http://orangemed.testing-elit.ru/otdeleniya/">Отделения</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1401" id="menu-item-1401"><a href="http://orangemed.testing-elit.ru/otdeleniya/detskoe-otdelenie/">Детское
отделение</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1229" id="menu-item-1229"><a href="http://orangemed.testing-elit.ru/diagnostika/ultrazvukovaya-diagnostika/uzi-pochek/">УЗИ
почек</a></li>
</ul>
</li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-543" id="menu-item-543"><a href="http://orangemed.testing-elit.ru/tsenu/">Цены</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-363" id="menu-item-363"><a href="http://orangemed.testing-elit.ru/aktsii/">Акции</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-364" id="menu-item-364"><a href="http://orangemed.testing-elit.ru/programmy/">Программы</a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-478" id="menu-item-478"><a href="http://orangemed.testing-elit.ru/programmy/vedenie-beremennosti/">Ведение
беременности</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-477" id="menu-item-477"><a href="http://orangemed.testing-elit.ru/programmy/deti-do-1-goda/">Дети до 1
года</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-476" id="menu-item-476"><a href="http://orangemed.testing-elit.ru/programmy/deti-ot-1-do-3/">Дети от 1 до
3</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-475" id="menu-item-475"><a href="http://orangemed.testing-elit.ru/programmy/deti-ot-4-do-7/">Дети от 4 до
7</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-474" id="menu-item-474"><a href="http://orangemed.testing-elit.ru/programmy/shkolniki/">Школьники</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-366" id="menu-item-366"><a href="http://orangemed.testing-elit.ru/otdeleniya/">Отделения</a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-514" id="menu-item-514"><a href="http://orangemed.testing-elit.ru/otdeleniya/vzrosloe-otdelenie/">Взрослое
отделение</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-513" id="menu-item-513"><a href="http://orangemed.testing-elit.ru/otdeleniya/detskoe-otdelenie/">Детское
отделение</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-368" id="menu-item-368"><a href="http://orangemed.testing-elit.ru/kontakty/">Контакты</a></li>
</ul>
</nav>
Имеется HTML и CSS файл, в котором много неиспользуемых стилей CSS которые хотелось бы удалить в автоматическом режиме и оставить только те стили,...
что-то подобное как в колонках offset, только сделать в контейнер слева и справа по 2 колонкиЧтобы таким образом у нас получился 8-колоночный...