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

Guide to match the size of <td> with an <img>

I am currently attempting to align several images in my HTML using the <table> element. My goal is to eliminate any white space between the images. You can view my progress so far in this JSFiddle example: JSFiddle example. However, I am still encoun ...

Website route organization tool

Seeking assistance with implementing a route planning feature on my website. The user should be presented with multiple route options upon entering their origin and destination. Take a look at this reference site for inspiration: Any help would be great ...

Optimizing Bootstrap popover responsiveness for elements with excessive length to ensure a smooth display experience

I am currently working on creating a popover that remains in position when hovered over, specifically for elements that are too large to fit on the screen. However, I am facing some issues with my current implementation: <template> <div class ...

Can two Angular element components be utilized simultaneously on a single page in Angular 6?

Currently, I'm attempting to host independent Angular elements that can be seamlessly integrated into a non-Angular webpage. Everything works perfectly fine when there's only one element on the page, but as soon as I try to load two or more, I en ...

Need to specify a parameter type for the input tag in HTML

Currently, I am developing a customized focus method for my webpage using the following script: <script type="text/javascript"> function myFunction() { document.getElementById("name").focus(); } </script> I ...

`Is there a way to determine when a combination of keys is no longer being held down?`

I have a specific goal in mind (simplified for clarity): User initiates Ctrl + Tab, causing a hidden div#my_div to appear User holds down Ctrl and releases Tab, keeping div#my_div visible User continues holding Ctrl and presses Tab, resulting ...

Generate a list of users using Angular in an efficient manner

I am working on creating a user list similar to the image provided below. I am using Angular and Bootstrap for the basics of this project. However, my concern is how to efficiently handle a large number of users. If the user count exceeds 10k, what would b ...

Turn off the special treatment of the "class" attribute

The Background: When using BeautifulSoup to parse HTML, the attribute class is considered a multi-valued attribute and is treated differently: It's important to remember that a single tag can have multiple values for its "class" attribute. When se ...

Is there a way to trigger an event once the ajax content has been fully loaded into a div with jQuery?

I have been working on a project that involves creating a scrolling feed content. I have managed to display the feed content inside a div successfully. However, I am facing an issue where each feed item needs to scroll individually. To achieve this, I trie ...

Dynamic Selection List Population in jqGrid

Using jqGrid 4.13.3 - free jqGrid In the Add form, there is a static input element and a select list element. The keyup ajax function is bound to the input element using dataEvents in the beforeInitData event. Once the Add form is displayed, entering a va ...

Having trouble aligning the unordered list with the input

Can anyone help me troubleshoot my CSS so that the list appears below the input field? Check out this example The nested menu in this example is positioned too far to the left and slightly too high. It should be aligned with the bottom of the containing ...

Using Aurelia CLI: Incorporating npm package containing image assets into your Aurelia CLI application

Currently, I am attempting to incorporate lightslider (jquery slider library) from NPM into my Aurelia CLI 0.23.0 project. In order to achieve this, I have updated the dependencies in aurelia.json as follows: { "name": "lightslider", ...

Dealing with ajax requests when there is no network connection and the wifi is turned off on an Android

Currently, I am in the process of creating an Android Application with phonegap. While everything is functioning correctly with the request/response handling, I am encountering a challenge when there is no 3G network available and WiFi is disabled. In this ...

Which specific transitionend (or animationend) event should I use for this application?

I'm feeling a bit lost when it comes to using transitionend (or if I should be using animationend in this scenario). I'm not sure whether to utilize var, node, or box. Essentially, I am a complete beginner in this case. My goal is to have my div ...

Showing error messages in Angular when a form is submitted and found to be invalid

My form currently displays an error message under each field if left empty or invalid. However, I want to customize the behavior of the submit button when the form is invalid. <form #projectForm="ngForm" (ngSubmit)="onSubmit()"> ...

The issue arises when attempting to execute an Ajax function within a JQuery append method, causing malfunction

My JQuery append function is calling an ajax function within the onChange method. Here is my code snippet: var data='<?php echo $data; ?>'; var tambah=1; var txt=1; function add_fullboard_dalam_kota(){ function showU(str) { ...

The use of jQuery ajax requests is leading to a refresh of the page

I've encountered an issue with a button on my HTML page that is not associated with any form. <input type='button' id='submitter' value='add'/> There is a click handler attached to it: $('#submitter').c ...

How can I specify the exact width for Bootstrap 3 Progress Bars?

I have a single page that displays all my files in a table format, and I also have the count of open and closed files. My goal is to represent the percentage of closed files using a progress bar. The width of the progress bar should change based on this p ...

Is it possible to convert (HTML and CSS3 generated content for paged media) into a PDF format?

Would it be possible to convert a HTML document styled with CSS3 Generated Content for Paged Media into a PDF format? If such an application does not exist, what alternatives can I consider as the foundation for developing a converter? Thank you ...

Display and conceal multiple div elements using a timer

Currently, I am working on creating a message box that will display active messages one by one from a MySQL table. The challenge is that the number of divs needed can vary depending on the number of active messages in my database. Using an ajax timer and P ...