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

Modify the color of drop-down menu links

Recently, I set up a drop-down menu containing links. Initially, when hovering over the names in the menu, they would change color and display the drop-down. I had successfully made all the names golden, with the hovering name turning black while display ...

htmlcssdrop-down-menu

I need to mass upload a collection of resumes stored in a zip file, then extract and display the content of each resume using a combination of HTML

I recently used a service to extract and retrieve the contents of a zip file. I am trying to read the content of the files and integrate them into the scope of my Angular project. Any suggestions would be greatly appreciated. Below is an outline of my func ...

javascriptjqueryangularjsjsonhtml

Envelop the phrases onto a fresh line

I'm having trouble getting the text inside a div to display correctly. When the text is too long, it just keeps stretching instead of breaking into new lines. How can I make sure that the content displays as a block within the div? Thank you. .box ...

htmlcss

What is the process for changing the border color of a material selection?

Is it possible to customize the border color of a material select element? I attempted changing the border color using css from: to this: Any suggestions on how to achieve this? Appreciate any assistance you can provide! ...

cssangularangular-materialmaterial-design

Material-UI Swipeable Drawer with a see-through design

Any tips on how to apply a 'transparent' style background property to my SwipeableDrawer component from Material UI? I'm having difficulty changing the background directly from my code since the component generates another component in the H ...

javascripthtmlcssreactjsmaterial-ui

The concept of CSS "preload" animation

When working with CSS, I encountered an issue with lag while loading 24 different mask images for a transition effect. To address this, I tried using a div called "preload" to cache the images and prevent lag on playback: <div class='trans' s ...

javascriptcss

What is the reason behind HTML5 Canvas drawing layering a fresh path onto the current path with each new point added?

Trying to explain the issue is a bit challenging, which is why I created a JS Fiddle to demonstrate what's happening: http://jsfiddle.net/dGdxS/ - (Only compatible with Webkit browsers) When you hover over the canvas, you can draw, but you may need to ...

htmlcanvasdrawing

Incorporating Cascading Style Sheets (CSS) to

I'm looking to style my form with CSS but I'm unsure of the process. Currently, the form is generated using PHP and MySQL, and in the browser it appears like this: http://gyazo.com/5d099ead9bd6ea83859a5114b2438748 I want to align the text and dr ...

phphtmlcssforms

What could be causing the discrepancy in sizes of the columns in my multi-column layout?

https://jsfiddle.net/drqjmssy/ Seeking assistance from the linked jsfiddle, I aim to align "div class='main_content'" vertically with "div class='sidebar'". What would be the best approach to achieve this alignment? In case the fiddle ...

htmlcss

What steps can be taken to turn this html code and css into a mobile application?

I have begun working on my HTML and CSS but need some guidance to create a mobile app without needing to resize it when accessed through the web. Additionally, I would like to make it responsive in CSS. Can you provide me with the necessary code? @c ...

htmlcss

The Date Picker pops up automatically upon opening the page but this feature is only available on IE10

There seems to be an issue with the date picker opening automatically on IE10, while it works fine in Firefox where it only appears when you click on the associated text box. Does anyone have insight into why this might be happening specifically in IE10? ...

javascriptjqueryhtmlinternet-explorer

Steps to trigger a Bootstrap modal when the user clicks anywhere on the webpage

I need assistance with setting up a Bootstrap dialogue modal to open at the clicked position on a mousedown event when a user interacts with the page. Despite my attempts, the dialogue modal is not opening where it should be. Here's what I've tri ...

javascriptjquerycsstwitter-bootstrap-3modal-dialog

unusual behavior observed in addEventListener

I have recently delved into learning about the DOM. I have a project in mind where I want to create a website with buttons that, when clicked, play different drum sounds. As part of my experimentation with JavaScript, I wanted to explore the this keyword. ...

javascripthtmljqueryevent-handling

What steps can be taken to resolve the issue of Ajax not retrieving any data from

I'm struggling to identify the error in this code. I have created a search bar and implemented AJAX to automatically fetch data. Here is the HTML file: <!DOCTYPE html> <html> <head> <title></title> <script ...

javascriptphpjqueryhtmlobject

Using CSS alone to maintain responsive aspect ratios: A solution to filling container heights

I'm trying to find a way for an inner div to fill the height of its container with a fixed aspect ratio of 1:1. The usual method using padding works great for filling the width, but not so much for the height. Is it possible to achieve this purely wi ...

htmlcssresponsive-design

Easily transform a CSS file for optimal use on dark backgrounds from scratch

I've got around 200 CSS files that look like this: /** * GeSHi Dynamically Generated Stylesheet * -------------------------------------- * Dynamically generated stylesheet for bnf * CSS class: , CSS id: * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 ...

phpcssalgorithm

When utilizing React, I generated an HTML page with a distinct .js file, however, encountered two unexpected errors

Update : Gratitude to everyone who has helped me in tackling this issue. One user suggested using a web server, but my intention was to find a solution using just a single HTML and JS file. Even though I tried following the steps from a similar question o ...

javascripthtmlreactjs

What is the process for making the default text in a text box appear grayed out?

Hey there! I have this cool idea for a text box. Basically, it starts off with default text but when you hover your mouse over it, the text disappears and you can start typing as usual: If you want to see how it looks like, you can check out this link: N ...

javascriptcss

Utilizing Jquery to implement active state and unique IDs during mouseover operation

I found this great example on Stack Overflow that demonstrates Jquery Show/Hide functionality when hovering over links. It works perfectly by showing the content of the next div when the corresponding link is hovered over. However, I'm facing an issu ...

jqueryhtmlcss

Database function call is not producing any results

Initially, the code below was intended to create a new user when starting the quiz, but now it is meant to update an existing user's details. However, I am facing an issue where the addUser() function is not completing as expected even though all inpu ...

phphtmlmysqlsql