Tips for incorporating scrolling into a sub menu

I'm currently attempting to incorporate vertical scroll only for my sub-menu using CSS, without including a horizontal scroll.

However, the issue arises when I remove the horizontal scroll - it causes the nested sub-menu within the initial one to break and become invisible.

Any assistance would be greatly appreciated.

Below is the HTML code for my menu:

<div class="header-col header-center hidden-for-sm"><span class="separator"></span>
  <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>
    [Menu items continue here...]

Website link:

Note: The website may have restrictions in certain countries. Please check beforehand!

Thank you in advance!

htmlcsswordpressmenu

Answer №1

If you want the sub menus to scroll vertically only, simply include the following CSS code:

.sub-menu{
            overflow-y: auto;
            max-height: 10em;
        }

For a visual reference, check out this CodePen demo.

Additionally, you can watch a demonstration of the solution in action by visiting this link: TestWise Replay| sub-menu multiple scrolls

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Entwine words around an immovable partition

Is it possible to create an HTML element that remains fixed in place even as the content on the webpage changes, with everything else adjusting around it? I am looking to add a continuous line that spans across a dynamic webpage. No matter how much conten ...

javascriptjqueryhtmlcss

Maintain scroll position during ajax request

I am working on a single-page website that contains numerous containers. Each container's content is loaded dynamically via ajax, so they may not all be populated at the same time. These containers have variable heights set to auto. The website uti ...

javascriptjqueryhtmlcss

Troubleshooting issues with CSS dropdown menu in Internet Explorer and Chrome

I am encountering an issue with my dropdown menu not functioning properly in Internet Explorer 10, Chrome, and compatibility mode. Surprisingly, it works flawlessly in the latest version of Firefox. CSS: #menu_items { float: left; width: 600px; } #me ...

htmlcsswebkitgecko

How can I use JavaScript and HTML to print a canvas that is not within the print boundaries?

As someone who is new to javascript, I recently created a canvas function that allows me to successfully print. However, I am encountering an issue with printing large canvas areas. When I navigate to the further regions of the canvas and try to print, i ...

javascriptcsshtmlcanvasprinting

add the closing </div> tag using jquery only

Having a slight issue here, it seems that jQuery is being overly clever. Within my HTML code, I am attempting to insert this string into a div container: </div><div class="something"> You'll notice that the closing tag comes first, foll ...

javascriptjqueryhtmlcss

Fade effect on content in Bootstrap carousel

I am currently making some updates to the website mcelroymotors.com. One issue I have encountered while working on the homepage carousel is that the caption only pops up on the first slide, and does not appear on any of the subsequent slides. I would lik ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the safest method to insert data into a div element?

After utilizing ajax to retrieve a JSON file from the web, I successfully assigned one of the keys to a variable. Now, my question is how can I display the contents of that variable within a div tag? My initial approach was: theJsonKey = jsonObject.key; ...

javascripthtmlajaxjsonsecurity

Implementing personalized SVG icons for list items

Here is some HTML code along with SCSS that I need help with: <div class="risk"> <ul> <li><span>Aggressive</span>Lorem ipsum dolor ...</li> <li><span>Growth</span>doloremque autem...</li ...

htmlcsssvg

Embarking on the journey of creating mobile web applications - where should you begin?

How can I begin learning to create mobile web apps? I have a keen interest in the design aspects, particularly the effects and animations that give them a native appearance. I suspect there are differences in CSS, HTML, and possibly JavaScript compared to ...

htmlcssmobile

Setting a default value within an input tag: A step-by-step guide

const [userData, setUserData] = useState([]); const handleUserInfo = (id) => { fetch(`https://602e7c2c4410730017c50b9d.mockapi.io/users/${id}`) .then(res => res.json()) .then(data => setUserData(data)) } <inpu ...

javascripthtmlreactjs

Incorporate a Background Image, which is linked to a website URL, by utilizing an external CSS file within

I am struggling to incorporate an external CSS file (specifically a background image from a URL) into my HTML document. I have successfully applied internal CSS, so the issue is not with the website link. Despite reviewing similar posts addressing comparab ...

htmlcss

Resolved navigation bar problems

As a beginner in web development, I am working hard to launch my first website. Today, I have a question for the stack overflow community regarding a fixed navbar issue. The navbar I have created is functioning properly on Chrome, but when it comes to Fire ...

phphtmlcssnavbarfixed

Error: The JavaScript SRC cheat is malfunctioning

Having an issue with the code below. The 'dummy1' and 'dummy2' variables are not loading their content as expected on the page. Any suggestions? <html> <head> <title>JavaScript On-line Test</title> <script LA ...

javascripthtml

"Crafting a sleek card design using Material UI components in React JS

Exploring the world of material UI and looking to create a card with an image and footer. However, I'm facing challenges as there is no default option for adding a footer in the card. https://i.stack.imgur.com/xlxyb.png I want the image to be center ...

cssreactjsmaterial-ui

The drop-down menu auto-loads as though it is being hovered over

I recently added a drop-down menu to my website that includes social media buttons. All the buttons are working properly, except for Google+. When the page loads, it seems as though the hover effect is automatically activated for the Google+ button. For e ...

htmldrop-down-menugoogle-plus

I am having trouble with my 'SELECT DISTINCT' command, it's not functioning correctly

When I attempted to populate my drop down menu with values from the database using 'Select DISTINCT', it only retrieved some of the data instead of all of it. Below is my PHP code: <? $sqlretrive = mysql_query("Select DISTINCT type from ...

phphtmlmysqldistinct

Employing jQuery for adding a class to the initial TD in every table row

Currently, I am dealing with a table structured like this: <table width="100%" border="0" cellspacing="0" cellpadding="0" id="tablecontent"> <tr class="tablerow"> <td>This is the td I want to add a class to.</td> <td c ...

jqueryhtmlcssclasshtml-table

The jQuery focus event appears to be malfunctioning

I am attempting to utilize the jQuery focus event to handle the following situation: There are three search criteria options: Post code, city, radius. The user can only select one option, indicated by a radio button. The requirement is that when a user c ...

jqueryhtml

Unable to incorporate additional functions while using directives

http://example.com Is there a way to incorporate an addChild(tree) function into this code in order to expand the data array? I have made changes to the template as shown below: '<p>{{ family.name }}{{test }}</p>'+ '<ul>& ...

angularjshtml

"Troubleshooting Issue: JavaScript and jQuery onClick Event Not Functioning Properly

Whenever I try to click on the "php1" div, nothing happens. The location.reload() function is only a placeholder used for testing if the onClick event is functioning properly. <div class="php-task"> <h1>PHP</h1> ...

javascripthtmljqueryajax