How do I add vertical scroll to wordpress menu item

See more:

Javascript

CSS

WordPress

I got a problem with menu and adding scroll to it.

I dont want horizontal scroll, I want vertical scroll and then when I hover over lets say "GELOVI" in shop I want that sub menu to pop out like it does without a scroll.

If you didn't understand me clearly please ask I will do my best to explain a bit more.

This is the website: https://rich-nails.com

Item in menu for scroll to be added to is called shop.

Thank you in advance.

This is the html menu code:

<pre><div class="header-col header-center hidden-for-sm"><ul id="menu-main-menu" class="main-menu mega-menu menu-hover-line show-arrow"><li id="nav-menu-item-3106" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-143 current_page_item active narrow"><a href="https://rich-nails.com/" class=" current">Home</a></li>
<li id="nav-menu-item-3138" class="menu-item menu-item-type-post_type menu-item-object-page narrow"><a href="https://rich-nails.com/about-us/">O nama</a></li>
<li id="nav-menu-item-15113" class="subMenu1 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children has-sub narrow sub-ready"><a href="https://rich-nails.com/shop/">SHOP</a>
<div class="popup" style="display: block;"><div class="inner" style=""><ul class="sub-menu">
	<li id="nav-menu-item-16752" class="menu-item menu-item-type-custom menu-item-object-custom" data-cols="1"><a href="/shop/?orderby=date">Novosti</a></li>
	<li id="nav-menu-item-16663" class="menu-item menu-item-type-post_type menu-item-object-page" data-cols="1"><a href="https://rich-nails.com/akcija/">Akcije</a></li>
	<li id="nav-menu-item-15809" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat" data-cols="1"><a href="https://rich-nails.com/product-category/sjajevi-i-baze/">Sjajevi i baze</a></li>
	<li id="nav-menu-item-18250" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children sub" data-cols="1"><a href="https://rich-nails.com/product-category/gelovi/">Gelovi</a>
	<ul class="sub-menu">
		<li id="nav-menu-item-27918" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/gelovi/clear-gelovi/">Clear gelovi</a></li>
		<li id="nav-menu-item-27919" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/gelovi/cover-gelovi/">Cover gelovi</a></li>
		<li id="nav-menu-item-27917" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/gelovi/babyboomer-gelovi/">Babyboomer gelovi</a></li>
		<li id="nav-menu-item-27922" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/gelovi/iconic-gel/">French gelovi</a></li>
		<li id="nav-menu-item-27920" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/gelovi/exclusive-gelovi/">Exclusive gelovi</a></li>
	</ul>
</li>
	<li id="nav-menu-item-15786" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children sub" data-cols="1"><a href="https://rich-nails.com/product-category/babe-lak/">Babe lak</a>
	<ul class="sub-menu">
		<li id="nav-menu-item-15787" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/babe-lak/babe/">Babe</a></li>
		<li id="nav-menu-item-15788" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/babe-lak/glitter-babe/">Glitter Babe</a></li>
		<li id="nav-menu-item-15796" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/babe-lak/4in1-babe/">4in1 Babe</a></li>
		<li id="nav-menu-item-15797" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/babe-lak/collection-babe/">Collection Babe</a></li>
	</ul>
</li>
	<li id="nav-menu-item-16838" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children sub" data-cols="1"><a href="https://rich-nails.com/product-category/primeri-i-tekucine/">Primeri i tekućine</a>
	<ul class="sub-menu">
		<li id="nav-menu-item-25736" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/primeri-i-tekucine/acetoni-i-cleaneri/">Acetoni i Cleaneri</a></li>
		<li id="nav-menu-item-19601" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/primeri-i-tekucine/primeri-i-priprema-nokta/">Primeri i priprema nokta</a></li>
		<li id="nav-menu-item-25735" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/primeri-i-tekucine/ulja-za-kutikuli/">Ulja za kutikulu</a></li>
	</ul>
</li>
	<li id="nav-menu-item-15805" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children sub" data-cols="1"><a href="https://rich-nails.com/product-category/raspe/">Rašpe</a>
	<ul class="sub-menu">
		<li id="nav-menu-item-15807" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/raspe/raspe1/">Rašpe</a></li>
		<li id="nav-menu-item-15806" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/raspe/polir-blokovi/">Polir blokovi</a></li>
	</ul>
</li>
	<li id="nav-menu-item-15808" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat" data-cols="1"><a href="https://rich-nails.com/product-category/sablone/">Šablone</a></li>
	<li id="nav-menu-item-27530" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat" data-cols="1"><a href="https://rich-nails.com/product-category/https-rich-nails-com-product-category-tipse-i-ljepilo/">Tipse i ljepilo</a></li>
	<li id="nav-menu-item-17082" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children sub" data-cols="1"><a href="https://rich-nails.com/product-category/kistovi/">Kistovi</a>
	<ul class="sub-menu">
		<li id="nav-menu-item-21977" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/kistovi/gel/">Gel</a></li>
		<li id="nav-menu-item-21978" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/kistovi/nail-art/">Nail Art</a></li>
		<li id="nav-menu-item-21981" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/kistovi/ostalo-kistovi/">Ostalo</a></li>
	</ul>
</li>
	<li id="nav-menu-item-15798" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat" data-cols="1"><a href="https://rich-nails.com/product-category/metalni-pribor/">Metalni pribor</a></li>
	<li id="nav-menu-item-17127" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children sub" data-cols="1"><a href="https://rich-nails.com/product-category/elektricna-oprema/">Električna oprema</a>
	<ul class="sub-menu">
		<li id="nav-menu-item-27713" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/elektricna-oprema/elektricna-oprema-elektricna-oprema/">Električna oprema</a></li>
		<li id="nav-menu-item-27716" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/elektricna-oprema/nastavci-comby-manikura/">Nastavci comby manikura</a></li>
		<li id="nav-menu-item-27717" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/elektricna-oprema/nastavci-skidanje-gela/">Nastavci skidanje gela</a></li>
		<li id="nav-menu-item-17232" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/elektricna-oprema/dodatna-oprema-elektricna-oprema/">Dodatna oprema</a></li>
	</ul>
</li>
	<li id="nav-menu-item-15791" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children sub" data-cols="1"><a href="https://rich-nails.com/product-category/dodatna-oprema/">Dodatna oprema</a>
	<ul class="sub-menu">
		<li id="nav-menu-item-16959" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/dodatna-oprema/display/">Display</a></li>
		<li id="nav-menu-item-27608" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/dodatna-oprema/cetkice-za-prasinu/">Četkice za prašinu</a></li>
		<li id="nav-menu-item-16958" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/dodatna-oprema/ostalo-dodatna-oprema/">Ostalo</a></li>
	</ul>
</li>
	<li id="nav-menu-item-15789" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children sub" data-cols="1"><a href="https://rich-nails.com/product-category/ukrasi/">Ukrasi</a>
	<ul class="sub-menu">
		<li id="nav-menu-item-16522" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/ukrasi/aurora-prah/">Aurora prah</a></li>
		<li id="nav-menu-item-15816" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/ukrasi/ukrasi-u-kolutu/">Ukrasi u kolutu</a></li>
		<li id="nav-menu-item-21754" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/ukrasi/cirkoni/">Cirkoni</a></li>
		<li id="nav-menu-item-27824" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/ukrasi/folije/">Folije</a></li>
		<li id="nav-menu-item-15818" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/ukrasi/glitteri/">Glitteri</a></li>
	</ul>
</li>
	<li id="nav-menu-item-19653" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat" data-cols="1"><a href="https://rich-nails.com/product-category/merch/">MERCH</a></li>
	<li id="nav-menu-item-15792" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children sub" data-cols="1"><a href="https://rich-nails.com/product-category/fashion/">Fashion</a>
	<ul class="sub-menu">
		<li id="nav-menu-item-15793" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/fashion/majice-i-hudice/">Majice i hudice</a></li>
		<li id="nav-menu-item-15799" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/fashion/maskice/">Maskice</a></li>
		<li id="nav-menu-item-15801" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/fashion/pregaca/">Pregača</a></li>
		<li id="nav-menu-item-15800" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/fashion/ostalo/">Ostalo</a></li>
	</ul>
</li>
	<li id="nav-menu-item-15802" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat" data-cols="1"><a href="https://rich-nails.com/product-category/gift-card/">Gift card</a></li>
	<li id="nav-menu-item-15795" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children sub" data-cols="1"><a href="https://rich-nails.com/product-category/trepavice/">Trepavice</a>
	<ul class="sub-menu">
		<li id="nav-menu-item-15813" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/trepavice/volumenske-i-klasicne/">Volumenske i klasične</a></li>
		<li id="nav-menu-item-15812" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/trepavice/pincete/">Pincete</a></li>
		<li id="nav-menu-item-15811" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/trepavice/ljepila/">Ljepila</a></li>
		<li id="nav-menu-item-15810" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/trepavice/dodatna-oprema-trepavice/">Dodatna oprema</a></li>
	</ul>
</li>
	<li id="nav-menu-item-18737" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children sub" data-cols="1"><a href="https://rich-nails.com/product-category/2mbeauty/">Zadnji artikli – 2mBeauty</a>
	<ul class="sub-menu">
		<li id="nav-menu-item-18971" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/2mbeauty/2mbeauty-gelovi-2mbeauty/">2mBeauty Gelovi</a></li>
		<li id="nav-menu-item-20365" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/2mbeauty/sjajevi-i-baze-2mbeauty/">Sjajevi i baze</a></li>
		<li id="nav-menu-item-20370" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/2mbeauty/tekucine-2mbeauty/">Tekućine 2mBeauty</a></li>
		<li id="nav-menu-item-18972" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children"><a href="https://rich-nails.com/product-category/2mbeauty/color-gel/">Color Gel</a>
		<ul class="sub-menu">
			<li id="nav-menu-item-20032" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/2mbeauty/color-gel/carving/">Carving</a></li>
			<li id="nav-menu-item-20033" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/2mbeauty/color-gel/effect-gel/">Effect gel</a></li>
			<li id="nav-menu-item-20034" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/2mbeauty/color-gel/hc-magic-art-liquid/">HC Magic Art Liquid</a></li>
			<li id="nav-menu-item-20035" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/2mbeauty/color-gel/plasteline/">Plasteline</a></li>
			<li id="nav-menu-item-20036" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/2mbeauty/color-gel/spider/">Spider</a></li>
			<li id="nav-menu-item-20037" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/2mbeauty/color-gel/stamping/">Stamping</a></li>
			<li id="nav-menu-item-21466" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/2mbeauty/color-gel/termo/">Termo</a></li>
		</ul>
</li>
		<li id="nav-menu-item-18739" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children"><a href="https://rich-nails.com/product-category/2mbeauty/mini-me/">Mini Me</a>
		<ul class="sub-menu">
			<li id="nav-menu-item-20025" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/2mbeauty/mini-me/all-in/">All in</a></li>
			<li id="nav-menu-item-20026" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/2mbeauty/mini-me/cracking/">Cracking</a></li>
			<li id="nav-menu-item-20027" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/2mbeauty/mini-me/elastic-base/">Elastic Base</a></li>
			<li id="nav-menu-item-20028" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/2mbeauty/mini-me/galaxy/">Galaxy</a></li>
			<li id="nav-menu-item-20029" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/2mbeauty/mini-me/holo/">Holo</a></li>
			<li id="nav-menu-item-20030" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/2mbeauty/mini-me/intense/">Intense</a></li>
			<li id="nav-menu-item-20031" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/2mbeauty/mini-me/metal/">Metal</a></li>
			<li id="nav-menu-item-20270" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/2mbeauty/mini-me/magnet-effect-5d/">MAGNET EFFECT 5D</a></li>
		</ul>
</li>
		<li id="nav-menu-item-20345" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/2mbeauty/acryl-gel/">Acryl Gel</a></li>
		<li id="nav-menu-item-20373" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/2mbeauty/dipgo/">Dip&Go</a></li>
		<li id="nav-menu-item-20392" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/2mbeauty/raspe-2mbeauty/">Rašpe 2mBeauty</a></li>
		<li id="nav-menu-item-20393" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/2mbeauty/dodatna-oprema-2mbeauty/">Dodatna oprema</a></li>
	</ul>
</li>
	<li id="nav-menu-item-15794" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children sub" data-cols="1"><a href="https://rich-nails.com/product-category/oklagije-za-maderoterapiju/">Oklagije za maderoterapiju</a>
	<ul class="sub-menu">
		<li id="nav-menu-item-15804" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/oklagije-za-maderoterapiju/oklagije-za-tijelo/">Oklagije za tijelo</a></li>
		<li id="nav-menu-item-15803" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat"><a href="https://rich-nails.com/product-category/oklagije-za-maderoterapiju/oklagije-za-lice/">Oklagije za lice</a></li>
	</ul>
</li>
</ul></div></div>
</li>
<li id="nav-menu-item-16135" class="menu-item menu-item-type-post_type menu-item-object-page narrow"><a href="https://rich-nails.com/objave/">Blog</a></li>
<li id="nav-menu-item-15524" class="menu-item menu-item-type-post_type menu-item-object-page narrow"><a href="https://rich-nails.com/cjenik/">Cjenik</a></li>
<li id="nav-menu-item-19274" class="menu-item menu-item-type-post_type menu-item-object-page narrow"><a href="https://rich-nails.com/postani-dio-tima/">Postani dio tima</a></li>
<li id="nav-menu-item-23036" class="menu-item menu-item-type-post_type menu-item-object-page narrow"><a href="https://rich-nails.com/edukacije/">Edukacije</a></li>
<li id="nav-menu-item-15306" class="menu-item menu-item-type-post_type menu-item-object-page narrow"><a href="https://rich-nails.com/contact-us/">Kontakt</a></li>
<li class=" astm-search-menu is-menu is-dropdown menu-item"><a href="#" aria-label="Search Icon Link"><svg width="20" height="20" class="search-icon" role="img" viewBox="2 9 20 5" focusable="false" aria-label="Search">
						<path class="search-icon-path" d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></svg></a><form class="is-search-form is-form-style is-form-style-3 is-form-id-0 " action="https://rich-nails.com/" method="get" role="search"><label for="is-search-input-0">Search for:<input type="search" id="is-search-input-0" name="s" value="" class="is-search-input" placeholder="Search here..." autocomplete="off"></label><button type="submit" class="is-search-submit">Search Button<svg focusable="false" aria-label="Search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></svg></button></form><div class="search-close"></div></li></ul></div>

What I have tried:

I tried adding css cose to sub class but the problem is that horizontal scroll which I dont want, and if I remove it my other sub menu which supose to open it is somehow behind the screen and it is not visible.