The Nivo Slider is stealthily concealing my CSS Menu

Although this question has been previously asked, I am still unable to make it work with the solutions provided;

The website in question is

I have tried changing the z-index on all menu items to 99999, but they are still appearing below.

<div id="slidercont"> 
<div id="slider"> 
        <img src="http://digitalstr.com/wp-content/uploads/2011/09/ibfconpromo.png" /> 
    <img src="http://digitalstr.com/wp-content/uploads/2011/09/irconspacepromo.png" />
</div> 

#access {
    background: #3b95bd; /* Solid color for older browsers */
    clear: both;
    display: block;
    float: left;
    margin: 0 auto 6px;
    width: 100%;
    z-index: 99999;
}
.menu {
    margin-top: -20px !important;
    z-index: 99999;
}
#access ul {
    font-size: 13px;
    list-style: none;
    margin: 0 0 0 -0.8125em;
    padding-left: 0;
    z-index: 99999;
}
#access li {
    float: left;
    position: relative;
    z-index: 99999;
}
#access a {
    color: #eee;
    display: block;
    line-height: 3.333em;
    padding: 0 1.2125em;
    text-decoration: none;
    z-index: 99999;
}
#access ul ul {
    -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    display: none;
    float: left;
    margin: 0;
    position: absolute;
    top: 3.333em;
    left: 0;
    width: 140px;
    z-index: 99999;
}
#access ul ul ul {
    left: 100%;
    top: 0;
    z-index: 99999;
}
#access ul ul a {
    background: #f9f9f9;
    border-bottom: 1px dotted #ddd;
    color: #444;
    font-size: 13px;
    font-weight: normal;
    height: auto;
    line-height: 1.4em;
    padding: 10px 10px;
    width: 120px;
    z-index: 99999;
}

Answer №1

Ensure that z-index is only effective on positioned elements by setting position:relative for all elements with z-index.

Update: Consider the following adjustment:

#branding {
border-top: 2px solid #BBBBBB;
padding-bottom: 10px;
position: relative;
z-index: 2; // DELETE THIS LINE
}

Answer №2

It's important for every element to have either position:relative or position:absolute set when using z-index.

Consider updating your CSS file at

#slidercont { 
width: 929px;
margin: 0 auto;
height: 260px; 
z-index:10; 
position:relative ; //or  position:absolute
} 

Answer №3

Success! Everything fell into place perfectly.

.nivoSlider {
    position:relative;
    width:100%;
    height:auto;
    overflow: hidden;
    z-index:-50;
}

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 for accessing JSON data both forwards and backwards

I am attempting to implement Next/Previous buttons for a json array, but I am encountering difficulties in making it work. Here is my latest attempt: <div id="text"></div> <button name="prev">go to previous div</button> <but ...

Issues with jQuery function arising post-update to newer jQuery version

Recently, I encountered an issue with a function that used to work perfectly fine with jQuery 1.8.3. However, when I upgraded to jQuery 1.10.x or above, the function stopped working. <script type="text/javascript"> $.ajaxSetup({cache: false}); ...

Are you utilizing content loaded through jquery load in your work?

I have successfully utilized jQuery's .load() function to retrieve the contents of a table from another webpage and insert it into the current page, which is functioning properly. However, when I try to run scripts afterwards that manipulate the newly ...

Sending information from ngRoute resolve to the controller

I am currently working on an application that utilizes ngRoute to create a Single Page Application. One of the requirements is to ensure that the view is not loaded until the data has been successfully fetched from the database. While I have managed to ach ...

choose a unique jQuery id without any duplicates

Trying to implement a simple system comment feature similar to Facebook, but struggling with selecting the right ID for submission. The issue I'm facing is that the first form works correctly, but for subsequent forms, I always retrieve the data-id fr ...

A quick and easy way to locate the object tag along with the param, and insert the embed tag within an HTML document is

Struggling with understanding the simple HTML DOM of PHP? You're not alone. As a newcomer to the programming industry, following instructions can be challenging. I've been searching for how to locate the object tag and embed, but haven't fou ...

Achieve the effect of making the Bootstrap JS Collapse text bold after it has been

Is there a way to make Bootstrap JS Collapse text Bold after it has been clicked on? <tr data-toggle="collapse" data-target="#demo8" class="accordion-toggle"> <td> <div class="fa ...

Exploring the differences between Material-UI's makeStyles and withStyles when it comes to

One thing I've observed is that the naming convention for classes created with makeStyles and hooks looks like this: https://i.stack.imgur.com/HcDUc.jpg On the other hand, classes produced using withStyles and higher order components (HOC) follow a ...

Using jquery to navigate back to the search results page

I am trying to figure out how to use jquery to return to the search results page, but my current code always takes me back to the main data instead of the search results. Can anyone help me with this issue? $(document).ready(function() { $("#kembali ...

The HTML and CSS code I wrote functions perfectly on Codepen, but for some reason, it appears different when I view it in my Chrome environment

My codepen displays perfectly, but when I run the same code on my local environment it looks off. I can't seem to figure out what is causing the difference, especially since I copied and pasted the exact code. Both the codepen and my environment are u ...

What is the significance of keyframes in CSS animations at different percentages

I'm facing a challenge with the code below that is intended to make objects float from left to right in the background. However, once they go off-screen, a vertical scroll bar appears despite the overflow-y: hidden attribute added to the class. I atte ...

Attempting to retrieve currentScript is causing a typeError to be thrown

I'm attempting to access a custom attribute that I added to my script tag: <script type="text/javascript" src="https://.../mysource.js" customdata="some_value"></script> To make this work on Internet Explorer ...

Creating visualizations by overlaying shapes onto images using specified coordinates in jQuery

I have a web application in development that integrates with the skybiometry API. Their demo showcases a fantastic user feedback system displayed after facial recognition, similar to the one shown below. I am currently working on implementing a similar fe ...

Executing Multiple AJAX Functions with when()

My goal is to use jQuery's when() method to run multiple Ajax functions upon form submission. The plan is to wait for these functions to finish and then finally submit the form. However, it seems like my code is not working as intended: $('form[ ...

Elegant Decline of Javascript Functionality - Imported Web Assets

Looking for assistance from experienced JS coders. I'm currently working on a Wordpress website that utilizes jQuery AJAX methods to reload either the entire content area or just the main content section based on different navigation clicks. My aim i ...

Personalize the bootstrap-vue styling within your Nuxt project

Currently, I am working on a nuxt project and utilizing bootstrap-vue as a styling module for my components. I am unsatisfied with the default styles provided and wish to incorporate some customization. Specifically, I aim to modify the appearance of the ...

Disregarding 'zIndex' directive within JavaScript function, an image stands apart

There is an issue with the z-index values of rows of images on my webpage. Normally, the z-index values increase as you scroll further down the page. However, I want certain items to have a lower z-index than the rest (except on hover). These items are i ...

Customizing data from AJAX responses

Using PHP, I am receiving data as an object and passing it through a mustache template to create a table. My inquiry is about controlling the row breaks for my data. Is there a way to insert a <tr> after every 3 <td> without using JavaScript? ...

What is the best way to retrieve the parent of the initial jQuery object?

At the bottom of a lengthy table containing multiple button.enter-match elements, I am using the following code: $("button.enter-match") .button() .on('click', function() { $("form.enter-match").dialog({ modal: true, height: ...

What is the best technique for vertically aligning text within two divs placed side by side?

Thank you for taking the time to read this. I have a piece of code similar to the one below. While using line-height works when there is only one line of text, it becomes problematic when the comments section contains multiple lines. I am wondering what w ...