Не работает overflow-y:scroll

32
14 января 2018, 03:26

Имеется выпадающее меню, при ховере на вложенный пункт меню, если этих пунктов много и они выходят вниз за экран, должна появиться вертикальная прокрутка.
Подскажите, как сделать вертикальную прокрутку?
Можно добавить 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>

Answer 1

Самое простое без 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>

READ ALSO
Как удалить неиспользуемые стили из CSS?

Как удалить неиспользуемые стили из CSS?

Имеется HTML и CSS файл, в котором много неиспользуемых стилей CSS которые хотелось бы удалить в автоматическом режиме и оставить только те стили,...

47
контейнер в founation с 8 колонками

контейнер в founation с 8 колонками

что-то подобное как в колонках offset, только сделать в контейнер слева и справа по 2 колонкиЧтобы таким образом у нас получился 8-колоночный...

22
Как правильно сделать проверку формы?

Как правильно сделать проверку формы?

Как правильно отследить валидацию формы?

33
Выборка из MySQL драйвер PDO

Выборка из MySQL драйвер PDO

ЗдравствуйтеНедавно начал изучать PDO Mysql

29