Issues with jquery: dropdown menu not displaying border styling above fixed-positioned div

I've been working on a drop-down menu, but I can't seem to get the border and box shadow styling to display properly over my fixed .menu2 div.

Click here

.menu ul li ul{
position:absolute;
right: 0px;
border:1px solid #C3D1EC;
/*box-shadow*/
-webkit-box-shadow:0 1px 5px #CCCCCC;
   -moz-box-shadow:0 1px 5px #CCCCCC;
        box-shadow:0 1px 5px #CCCCCC;
margin-top:-1px;
display:none;
padding:0px 16px 0px 0;
}

.menu-2 {
  position: fixed;
  top: 30px;
  left: 0px;
  width: 100%;
  height: 100px;
  background: #DDD;
  color: #fff;
}
javascriptjqueryhtmlcss

Answer №1

To solve the issue, try giving it a higher z-index than menu2 :)

Check out this example: http://jsfiddle.net/rKaPN/55/

li.menu-right.drop-down ul {
    display: block !important;
    position: absolute;
    right: 0;
    z-index: 1;
}

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

CSS and HTML modal not closing

I've been working on creating a custom popup using HTML, CSS, and some jQuery functions. My idea was that when I click on the main div, it should expand in size and display a cancel button, which it does successfully. However, the issue arises when tr ...

jqueryhtmlcss

Stop the window from scrolling downwards

My website has a full-width slider as the main background and I am using jQuery to show or hide divs depending on the clicked link. However, when some sections are longer than the initial view, my page automatically scrolls to the bottom after a click. How ...

javascriptjqueryhtmlcsstwitter-bootstrap

GUIDE: How to wrap individual elements of a WordPress menu with a unique ID that matches the item title

I am looking to dynamically display an image based on the menu item clicked or hovered over. It would be useful to have a unique id for each menu item to easily manipulate them with JQuery. Is there a way to assign an id corresponding to the title of eac ...

jquerywordpressmenu

Transform HTML strings within JSON inputs into XML elements

Is there a way to properly parse a JSON file using BaseX 10.7 and the json:parse function? The issue I'm facing is that my file contains values with html characters, like the "text" value below: "order": 2, "page_id": 27, "text": "<p>& ...

htmljsonparsingxquerybasex

What is the solution for resolving a jQuery scroll animation glitch?

I have a piece of code that successfully takes me back to the top of the page, but it lacks animation. Can anyone provide assistance with adding animation to this function? $('.topScroll').click(function(){ $("html, body").animate({scrol ...

javascriptjqueryanimationjquery-animate

Utilize JSX to dynamically insert HTML tags onto a webpage

I am trying to achieve a specific task in JSX, where I want to identify all strings enclosed within delimiters :; and wrap them with HTML Mark tags to highlight them. However, the current implementation is not rendering the tags as expected. Is there a sol ...

javascriptreactjsjsx

Transform the JSON data into a uniform structure by eliminating unnecessary information

Here is a snippet of JSON Data from Mongo : { "status": 1, "message": "", "data": [ { "_id": "5f489968a26b303c54d0a174", "name": "Mobile", "SubCategory": [ { "_id": ...

javascriptnode.jsmongodbmongoose

Populating checkboxes by inserting data from an array

Currently, I have a set of checkboxes where I am storing the values in an array: <ul> <li><input type="checkbox" name="daily[]" value="0"></li> <li><input type="checkbox" name="daily[]" value="1"></li> ...

javascripthtmlarrays

I am trying to retrieve the checkbox value and assign it to a jQuery variable

Need to Retrieve Checkbox Value in jQuery Variable <input type='checkbox' id='checkbox_to_update' name='checkbox_to_update' value='1'> If the checkbox is checked, you can set it in a jQuery variable like this ...

jquery

Bringing the Jquery cursor into focus following the addition of an emoji

Looking to add emojis in a contenteditable div but facing an issue with the cursor placement. Here is a DEMO created on codepen.io. The demo includes a tree emoji example where clicking on the emoji adds it to the #text contenteditable div. However, after ...

javascriptjqueryhtmlcss

Align the Bootstrap button with the submit button inside a table cell

I am currently utilizing Bootstrap in my Symfony application, and within the index action, I have a table displaying all items along with two buttons for updating or deleting an item. Instead of using two separate buttons, I have opted to use one button to ...

htmlsymfonybootstrap-4twitter-bootstrap-4

Search for a specific node within an Ajax response using jQuery

Struggling with extracting a specific node from an XML document obtained via an Ajax call in my JavaScript code. The returned XML contains key/value pairs, and I am aiming to extract the value linked to a particular key. Let's imagine the structure o ...

javascriptjqueryajaxxml

My code written using Visual Studio Code is not displaying properly when I view it in my browser

I have been following along with a tutorial series that can be found at this link. This link will take you to the third video in the series, but I have also followed and programmed alongside the first and second videos. After installing Visual Studio Code ...

javascripthtmlcssvisual-studio-codesass

I'm receiving identical results from findOne even when using different IDs

I am currently working on creating a new array of products based on a list of different Ids. However, I have encountered an issue where the same product is being returned for all Ids when using the findOne() method. let wishpro = ['632a5e5rtybdaaf ...

javascriptnode.jsmongodbexpressmongoose

`Is it possible to remove an empty frame using javascript?`

I have this script that generates a "layer" resembling a frame and I need to remove it. Here is the code for creating the layer: function disableLayer() { var layer = document.getElementsByTagName('div')[0]; d = document.createElement(& ...

javascriptjqueryhtml

What is the process for extracting the background color from a typescript file in Angular and connecting it to my HTML document?

My typescript array population is not changing the background color of my div based on the values in the array. I've attempted to set the background using [style.backgroundColor]="statusColor[i]", where statusColor is an array declared in my typescrip ...

htmlcssangulartypescript

Performance concerns with Three.js

Using react-three-fiber, I have set up a simple scene that seems to be causing my MacBook to heat up significantly. I'm not sure if this is normal or if there is an issue with the implementation: Check out the code here If anyone has any insights or ...

javascriptreactjsperformancethree.js

When a button is clicked, unleash the magic of music using JavaScript

Why isn't the button onclick working for the mp3 file I uploaded to GitHub? I even tried using the link through https://voca.ro/1dcHxW3v1oQA, but it still wouldn't work. function play() { var audio = new ...

javascripthtmlgithub

Encountering an error while using TypeScript, Mocha, and Express: "TypeError: app.address is not a

While transitioning an API from ES6 to TypeScript, a particular issue arises when attempting to run unit tests on the Express REST Endpoints: TypeError: Cannot read property 'address' of undefined The server code has been slightly adjusted for ...

javascriptnode.jstypescriptexpressmocha.js

Issue with validating alphanumeric value with multiple regex patterns that allow special characters

I have created a regular expression to validate input names that must start with an alphanumeric character and allow certain special characters. However, it seems to be accepting invalid input such as "sample#@#@invalid" even though I am only allowing sp ...

javascriptjqueryregexvalidation