How to make vertical scrolling?

Question

There is a drop-down menu. When you hover on any of the menu items, if there are a lot of menu items on one level and they go below the screen, then vertical scrolling should appear. https://jsfiddle.net/vosh67kh/3/
And now when hover appears horizontal scrolling
PS add that all the answers below do not correspond to the question

PS add that overflow-x:hidden; does not solve this problem
those. the drop-down menu should be at all levels, and now instead of a drop-down menu a mountain scroll appears

  * { box-sizing: border-box; } ul { list-style: none; } #top-menu-nav, #top-menu { line-height: 0; } #main-header { transition: background-color 0.4s, color 0.4s, transform 0.4s, opacity 0.4s ease-in-out; } .nav{ margin-top: 20px; } .nav li { position: relative; line-height: 1em; } .nav li li { margin: 0; padding: 0 20px; } .nav li li { position: relative; line-height: 2em; } #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; } .nav li li a, .et_mobile_menu li a { font-size: 14px; transition: all 0.2s ease-in-out; } #top-menu a { display: block; position: relative; color: rgba(0, 0, 0, 0.6); text-decoration: none; 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 { display:block; } .nav li ul { display:none; z-index: 9999; width: 240px; border-top: 3px solid #2ea3f2; background: #fff; 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 { overflow-y: scroll; height:80vh; } .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" id="menu-item-766"><a href="#">Диагностика</a> <ul class="sub-menu"> <li class="menu-item"><a href="#">Ультразвуковая диагностика</a> <ul class="sub-menu"> <li class="menu-item"><a href="#">УЗИ на определение пола ребенка</a></li> <li class="menu-item"><a href="#">Диагностика</a> </li> <li class="menu-item"><a href="#">УЗИ беременности 4D с допплерометрией</a></li> <li class="menu-item"><a href="#">УЗИ беременности III триместр</a></li> <li class="menu-item"><a href="#">УЗИ беременности II триместр</a></li> <li class="menu-item"><a href="#">УЗИ беременности I триместр</a></li> <li class="menu-item"><a href="#">УЗИ для определения беременности</a></li> <li class="menu-item"><a href="#">УЗИ лонного сочленения</a></li> <li class="menu-item"><a href="#">УЗИ матки</a></li> <li class="menu-item"><a href="#">УЗИ органов малого таза</a></li> <li class="menu-item"><a href="#">УЗИ легких</a></li> <li class="menu-item"><a href="#">УЗИ на наличие свободной жидкости</a></li> <li class="menu-item"><a href="#">УЗИ селезенки</a></li> <li class="menu-item"><a href="#">УЗИ поджелудочной железы</a></li> <li class="menu-item"><a href="#">УЗИ желчного пузыря</a></li> <li class="menu-item"><a href="#">УЗИ печени</a></li> <li class="menu-item"><a href="#">УЗИ брюшной полости</a></li> <li class="menu-item"><a href="#">УЗИ органов мошонки</a></li> <li class="menu-item"><a href="#">ТРУЗИ предстательной железы</a></li> <li class="menu-item"><a href="#">УЗИ остаточной мочи</a></li> <li class="menu-item"><a href="#">УЗИ мочевого пузыря</a></li> <li class="menu-item"><a href="#">Анализы</a> </li> <li class="menu-item"><a href="#">Взрослое отделение</a></li> <li class="menu-item"><a href="#">Отделения</a> </li> <li class="menu-item"><a href="#">Детское отделение</a></li> <li class="menu-item"><a href="#">УЗИ почек</a></li> </ul> </li> <li class="menu-item"><a href="#">Анализы</a> </li> <li class="menu-item"><a href="#">Анализы</a> </li> <li class="menu-item"><a href="#">Анализы</a> </li> <li class="menu-item"><a href="#">Анализы</a> </li> <li class="menu-item"><a href="#">Анализы</a> </li> <li class="menu-item"><a href="#">Анализы</a> </li> <li class="menu-item"><a href="#">Анализы</a> </li> <li class="menu-item"><a href="#">Анализы</a> </li> <li class="menu-item"><a href="#">Анализы</a> </li> <li class="menu-item"><a href="#">Анализы</a> </li> <li class="menu-item"><a href="#">Анализы</a> </li> <li class="menu-item"><a href="#">Анализы</a> </li> <li class="menu-item"><a href="#">Анализы</a> </li> </ul> </li> <li class="menu-item"><a href="#">О центре</a> <ul class="sub-menu"> <li class="menu-item"><a href="#">Новости</a> </li> <li class="menu-item"><a href="#">Врачи</a></li> <li class="menu-item"><a href="#">Политика конфиденциальности</a></li> <li class="menu-item"><a href="#">Нормативные акты</a></li> <li class="menu-item"><a href="#">Лицензии</a> </li> <li class="menu-item"><a href="#">Контролирующие органы</a></li> <li class="menu-item"><a href="#">Клятва Гиппократа</a></li> <li class="menu-item"><a href="#">Реквизиты</a> </li> <li class="menu-item"><a href="#">Вакансии</a> </li> <li class="menu-item"><a href="#">Расписание врачей</a></li> </ul> </li> <li class="menu-item" id="menu-item-769"><a href="#">Услуги</a> <ul class="sub-menu"> <li class="menu-item"><a href="#">Массаж</a></li> <li class="menu-item"><a href="#">Вакцинопрофилактика</a> </li> </ul> </li> <li class="menu-item" id="menu-item-543"><a href="#">Цены</a></li> <li class="menu-item" id="menu-item-363"><a href="#">Акции</a></li> <li class="menu-item" id="menu-item-364"><a href="#">Программы</a> <ul class="sub-menu"> <li class="menu-item"><a href="#">Ведение беременности</a></li> <li class="menu-item"><a href="#">Дети до 1 года</a></li> <li class="menu-item"><a href="#">Дети от 1 до 3</a></li> <li class="menu-item"><a href="#">Дети от 4 до 7</a></li> <li class="menu-item"><a href="#">Школьники</a> </li> </ul> </li> <li class="menu-item" id="menu-item-366"><a href="#">Отделения</a> <ul class="sub-menu"> <li class="menu-item"><a href="#">Взрослое отделение</a></li> <li class="menu-item"><a href="#">Детское отделение</a></li> </ul> </li> <li class="menu-item" id="menu-item-368"><a href="#">Контакты</a></li> </ul> </nav>

Unfortunately, this is not the best way to be specified, therefore it attracts potentially useful answers, which in a particular case do not work.

Kniha m kniha m 2,064 1 silver mark 13 bronze marks · Answer 1 · 2018-01-15T08:49:59

What would scroll appear when:

When you hover on any of the menu items, if there are a lot of menu items on one level and they go below the screen, then vertical scrolling should appear.

Correct .nav ul to

 .nav ul { overflow-y: auto; max-height: 80vh; }

To remove the horizontal scroll in #top-menu li li a add:

 #top-menu li li a { ... width: 100%; ... }

 * { -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 { display: block; } .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 ul { overflow-y: auto; max-height: 80vh; } .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: 100%; 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 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 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 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 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 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 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 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 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 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 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 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 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>

PS : to fine-tune the drop-down list, play with .nav ul {height:80vh}

please check in the sandbox, I brought the link jsfiddle.net/vosh67kh/3
@word, which scrolling appears in the drop-down list or on the page?

Qwertiy ♦ Qwertiy 76.8k 17 golden marks 74 silver marks 203 bronze marks · Answer 2 · 2018-02-10T20:40:45

No, it is impossible to do this only on css for the following reason.

If the third level menu will be positioned relative to the element

inside the scrollable area, it will fall under the scrolling and will not be able to be outside the scrollable block (second level menu).
outside the scrollable area, it will not move in sync with the vertical scrolling of the second level menu.

I recommend to go on the second path and with the help of js to ensure the synchronism of movement.

Although you can try to find some hack for webkit'ov, in which you can stylize the scroll bar. But in other browsers just will not take off.

Answer 3 · 2018-01-15T07:32:19

You actually already have vertical scrolling. If you need only vertical scrolling, and the horizontal one should be absent, try explicitly setting the overflow-x attribute of the selector .nav ul hidden as hidden .

For example:

 .nav ul { overflow-y: scroll; overflow-x:hidden; height:80vh; }

If nested lists with menu items open on the side, they will not be visible, because This code disables horizontal scrolling completely (other options are not yet technically available).

As a possible way out, you can try to remove the indent from the nested list. But, here you can already see for yourself what is more suitable for you (including in terms of design).

I hope that now you will understand how overflow-x works and where the nested lists actually disappear.
The root of the problem with the lists, I also indicated to you.
There is no offense, because I know the basics, and you have not even checked your code, it does not work
Sorry, and you me, just like you confused ruSO with freelancing exchange.
Here they can suggest, give advice, direct, if a person tries to understand himself .
If your question is only to get a fully developed and verified code, you should contact the freelancers.

How to make vertical scrolling?

3 answers 3

More articles: