Z-Index Problem with PureCSS Horizontal Scrollable Menu

I've been working on this issue but can't seem to get it right. I have a purecss menu with a horizontal scrollable feature, but the submenus at depth 1 and 2 don't appear on hover in Firefox and Safari - they are being hidden underneath.

I noticed that if I remove the pure-menu-scrollable class, everything works fine. However, I want to use this class to create a responsive menu.

https://i.sstatic.net/SIuki.png

<navi>
  <!-- Menu toggle -->
    <a href="#menu" id="menuLink" class="menu-link">
<div class="pure-menu pure-menu-horizontal pure-menu-scrollable"><ul id="menu-top" class="pure-menu-list"><li id="menu-item-10" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-10 pure-menu-item"><a class="pure-menu-link" href="http://localhost/wp/">Home</a></li>
<li id="menu-item-11" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-11 pure-menu-item"><a class="pure-menu-link" href="http://localhost/wp/index.php/category/arts/">Arts</a></li>
<li id="menu-item-12" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-12 pure-menu-item"><a class="pure-menu-link" href="http://localhost/wp/index.php/category/business/">Business</a></li>
<li id="menu-item-13" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-13 pure-menu-item"><a class="pure-menu-link" href="http://localhost/wp/index.php/category/computers/">Computers</a></li>
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21 pure-menu-item"><a class="pure-menu-link" href="http://localhost/wp/index.php/sample-page/">Sample Page</a></li>
<li id="...

The CSS for the pure menu is imported from this file 

.pure-menu {
    box-sizing: border-box;
}
.pure-menu-fixed {
    left: 0;
    position: fixed;
    top: 0;
    z-index: 3;
}
...

<p>I attempted to solve the problem by increasing the z-index to 5 for the <code>pure-menu-children class, but it didn't work. 



Any suggestions on how to resolve this issue?
htmlcss

Answer №1

It appears that the issue may be related to your CSS overflow settings rather than the z-index. To improve the situation, consider adding the following code snippet to the <head> section:

<style>
.pure-menu-scrollable {
    overflow-x: visible !important;
    overflow-y: visible !important;
}
</style>

Nevertheless, if this method proves effective, it would be advisable to revise your styles and eliminate the use of !important. It seems that the pure-menu-scrollable class has conflicting overflow settings in multiple locations, which should be resolved first.

Please note that without a live demonstration, it is challenging to confirm whether this solution completely resolves your issue. The provided code snippet appears to function properly after implementing this adjustment, but external factors might impact your specific scenario.

Update
According to official sources, PureCSS does not officially support dropdowns with scrollable menus. However, I have discovered a workaround involving minimal Javascript and slight modifications to your menu. Initially, adjust the surrounding <div> as follows:

<div id="scrollmenu" class="pure-menu pure-menu-horizontal">

An ID has been assigned to it, and the pure-menu-scrollable class has been removed. Subsequently, include the following line of Javascript:

<script type="text/javascript">
    document.getElementById('scrollmenu').addEventListener('touchstart', function(event){});
</script>

This action triggers touch events on the parent element (credit goes to Nick H247's post addressing a similar issue).

I trust this information proves beneficial!

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

JavaScript pause until the DOM has been modified

My current situation involves using a JavaScript file to make changes to the DOM of a page by adding a navigation menu. Following this code, there is another function that further modifies the newly added navigation menu. However, I am facing an issue wher ...

javascriptjqueryhtmldom

External CSS File causing improper sizing of canvas image

I have been working on implementing the HTML5 canvas element. To draw an image into the canvas, I am using the following javascript code: var img = new Image(); var canvas = this.e; var ctx = canvas.getContext('2d'); img.src = options.imageSrc; ...

javascriptcsshtml

Guide on generating a video thumbnail using JavaScript Application

Searching for a way to easily create a thumbnail from a video for uploading alongside the video itself to a server? I've been looking for JavaScript libraries to simplify the process without much luck. The scenario involves the user selecting a video ...

javascripthtmltypescriptvideo

Troubleshooting a mapping problem with CSS elements

While building my website, I have successfully mapped the elements by ID for all alphabet letters except A. When clicking on the letter A, it does not go to the respective elements. Can anyone please help me find a solution? Visit this link for reference ...

htmlcss

Is there a way to dynamically set the width of a CSS property value in React? I'm looking for a solution that allows for flexibility in adjusting

let sliderVal = avgRound * 20; {sliderVal}% ...

cssreactjs

Guide on showcasing a list over several pages in Flask

I'm working with Flask and facing a challenge in displaying a dynamic list of items across multiple pages, as the list can potentially contain over 1000 items. Inside app.py, I've set up a route like this: @app.route('/displayitems') ...

pythonhtmlflaskjinja2

How can one determine the dimensions of the browser window using a property?

Can someone please clarify how to find the width and height of the browser window specifically? Thanks in advance! ...

javascripthtmlcss

Creating consistent widths for drop downs and text boxes in Bootstrap

I'm currently using VB.Net MVC, Razor, Bootstrap, and Visual Studio 2013. My clients have requested that the dropdowns match the width of the text boxes. Here is how I create my dropdowns: @<div class="row"> <div class="col-md-4"> ...

htmlcsstwitter-bootstrap

If a table column lacks an unspanned cell, IE will disregard its width

Here is a visual representation of the issue I am facing: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <body> <table border="1"> <colgroup> <col ...

htmlhtml-tableinternet-explorer-9colgroup

What is the best way to iterate over my JSON data using JavaScript in order to dynamically generate cards on my HTML page?

var data = [ { "name":"john", "description":"im 22", "email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4c7d7e7f0c2b212d2520622f">[email protected]</a>" }, { "name":"jessie", ...

javascriptcssjson

Updating View in Angular 2 ngClass Issue

I'm encountering some challenges with updating my view using ngClass despite the back end updating correctly. Below is my controller: @Component({ selector: 'show-hide-table', template: ' <table> <thead> ...

javascriptcssangularangular2-template

What is the best method to make the first input field the focus in BootStrap?

Is there a way to prioritize the focus on the initial input element in an HTML form without specifying an ID? How to set the focus to the first input element in an HTML form independent from the id? I'm working with BootStrap and ASP.NET MVC4. De ...

javascripthtmltwitter-bootstrap

I'm facing some issues with my initial attempt at an Angular application and it's

After diving into Angular and setting everything up, I encountered an issue where instead of seeing a name displayed, I was getting {{ name }}: https://i.sstatic.net/SXYju.png Below is the content of app.component.html: <input type="text" [(ngModel)] ...

htmlangular

What is the best way to accommodate 4 columns within a 3-column HTML table layout?

I am facing a challenge with my table layout. Normally, it has 3 columns, but I am trying to figure out how to fit 4 cells into one row while maintaining the same width. Any suggestions on how to achieve this? ------------- | 1 | 2 | 3 | ------------- | ...

htmlhtml-table

Using the Strikethrough Feature in React

Is it possible to apply a strikethrough effect to a checkbox's label text when toggled on and off? In my system development process, I've utilized various methods. What modifications should be made in the fComplete method for this feature to wor ...

javascripthtmlcssreactjs

Make the HTML element expand to the remaining height of the viewport

Need help with creating a section that automatically fills the remaining viewport height below the navigation bar. The section includes a centered div and background image, along with a button at the bottom for scrolling down by one full viewport height. H ...

cssviewport

Discovered a critical vulnerability that requires your attention. Execute `npm audit fix` to resolve the issue, or use `npm audit` for more information

After attempting to install mysql using 'npm install mysql', I encountered an error message stating: "found 1 critical severity vulnerability run npm audit fix to fix them, or npm audit for details" Following this, I proceeded with 'npm au ...

htmlnode.jsdatabaseamazon-web-servicesnpm

Learn the steps to initiate a Vimeo video by simply clicking on an image

I have successfully implemented some code that works well with YouTube videos, but now I am looking to achieve the same effect with Vimeo videos. Does anyone have suggestions on how to do this? I need to replace the YouTube description with Vimeo, but I&ap ...

javascriptjqueryhtmlajax

Using CSS to align a <li> element in the center

Do you have a question? I am trying to center a menu using the <li> tag, and I also have two buttons. .subiectele-zilei { width:100%; padding-left: 25px; overflow:hidden; padding-bottom:8px; background-color:#f5f5f5; margin ...

htmlcsshtml-listscenter

Remove the footer from the main section

I'm facing an issue with the web page layout of my website. Here is a snippet of the structure: <body> <div class="container"> <div class="sidebar"> </div> <div class="content"> </div> </div> < ...

htmlcss