CSS-exclusive dropdown menu elements peeking out

I have been working on a CSS-only drop-down menu and I am encountering an issue where other content seems to be showing through. Despite my efforts, I can't figure out why this is happening.

If you would like to take a look, here is the link: http://jsfiddle.net/uQveP/4/

Could someone please provide some insight into what I may be doing incorrectly? CSS is not my strong suit and I could use some guidance.

The drop-down menu is appearing in the correct position, but there seems to be some overlap with other "test" links that should ideally be hidden by the dropdown. Referencing the image, the bottom two "test" links should not be visible when the dropdown is active.

TIA (Thanks In Advance)

css

Answer №1

(On my 2nd try)

Alright, to clarify, all you have to do is adjust the z-index values for the UL elements:

.drop-menu-header ul, .drop-menu-content ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  float: right;
  text-align: right;
}

.drop-menu-header ul li, .drop-menu-content ul li {
  display: block;
  position: relative;
  /*POOF*/
}

.drop-menu-header ul li ul, .drop-menu-content ul li ul {
  display: none;
  right: 0;
  /*SHAZAAM!*/
  z-index: 5;
}

.drop-menu-header ul li a {
  display: block;
  white-space: nowrap;
  color: #fff;
}

.drop-menu-content ul li a {
  display: block;
  white-space: nowrap;
}

.drop-menu-header ul li a img.fake-button, .drop-menu-content ul li a img.fake-button {
  padding: 0;
}

.drop-menu-header ul ul li a, .drop-menu-content ul ul li a {
  padding: 5px 15px;
}

.drop-menu-header span {
  padding: 5px 15px;
  display: block;
  white-space: nowrap;
  color: #fff;
}

.drop-menu-content span {
  padding: 5px 15px;
  display: block;
  white-space: nowrap;
}

.drop-menu-header ul li span a, .drop-menu-content ul li span a {
  padding: 0;
  display: inline;
  white-space: nowrap;
}

.drop-menu-header li:hover ul, .drop-menu-content li:hover ul {
  display: block;
  position: absolute;
  border: 1px solid #999999;
}

.drop-menu-header li:hover li {
  float: none;
  background-color: #5c87b2;
}

.drop-menu-content li:hover li {
  float: none;
  background-color: #fff;
}

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

Ways to modify color while user moves the screen

I'm working with some jQuery code that changes the colors of elements as the user scrolls down, and I want it to revert back to the original color when scrolling back up. However, the script is not behaving as expected... Here is the original working ...

javascriptjqueryhtmlcss

Styling emails with CSS: Tips for customizing fonts

I've been experimenting with setting a personalized font for an email. Within the HTML code of the email, I included the fonts using this snippet: <head> <style> /* latin-ext */ @font-face { font-family: &ap ...

htmlcssemailhtml-email

Tips for changing the color of an underline in an <a> tag when it is hovered over

Is it possible to change the color of the underline in an <a> tag when hovering over it? After some investigation, it seems that direct color changes are not feasible. Instead, you can use the border-bottom option. However, my attempt did not yield ...

htmlcss

It is not possible to decrease the size of the image that is currently used as the background image

Three images are arranged in this manner: https://i.stack.imgur.com/u4PdK.png The HTML code for this setup is as follows: <div class="lb-controlContainer"> <div class="lb-closeContainer"> <a class="lb-close"&g ...

css

The left side of the form input material is obscured unless the necessary criteria are fulfilled

I am currently in the process of developing the front-end for a web application using the material library. The issue I am facing is that when a field does not meet its requirements, such as needing to enter a 'bedrijfsnaam', the border turns red ...

cssangularmaterial-uiangular-material

Revamping Existing Styles: Making a Statement with `:after`

In my asp.net mvc application, I am facing an issue where the * symbol, representing a required field, and the ? symbol, representing help, are not both being displayed. The ? symbol seems to be overriding the * symbol, resulting in only one symbol being s ...

cssasp.netasp.net-mvcstylesheet

Extracting textual information from Wikipedia through iframes?

Currently, I am working on a website project utilizing Squarespace. This site will feature multiple pages dedicated to individuals who have reached a level of notability worthy of having their own Wikipedia page. With over 150 pages planned, manually writi ...

javascripthtmlcssiframewikipedia

Why is the Material UI React select not selecting all children except for the last one?

I have a challenge with selecting specific children: const useStyles = makeStyles(theme => ({ icons: { "&>*": { backgroundColor: "red", }, }, })) This is how it looks in JSX: <Grid item> < ...

cssreactjsmaterial-ui

Unable to retrieve custom CSS and JS files hosted on the server

Encountering Server Issue My server is returning a 404 NOT FOUND error when trying to access my static files: css and js. In IntelliJ IDEA, the path appears correct as shown in the image https://i.stack.imgur.com/nTFv9.png. However, upon accessing the pa ...

javascriptjavahtmlcsstomcat

Accessing .js and .css libraries from shared views in ASP.NET Core can be restricted

I am currently developing a simple application on ASP.NET core 3.1, and I'm facing a basic problem that I can't seem to solve. The menu of the application is located in a Shared view called _Layout.cshtml. I load .js and .css libraries in this v ...

cssasp.netviewsrcshared

Tips for concealing overlay when the cursor hovers

Can anyone help me with a code issue I'm having? I want to hide an overlay after mouse hover, but currently it remains active until I remove the mouse from the image. Here is the code: .upper {position: absolute; top: 50%; bottom: 0; left: 50%; tra ...

javascriptjqueryhtmlcss

How jQuery stops the submission of a form

Sample HTML Code <p><select name="status" class="form-control" id="showThisItem"> <option value=""> Select Status </option> <option value="Paid"> Paid </option> <option value="Unpa ...

javascriptjqueryhtmlcss

What is the best way to ensure a PrimeVue TabPanel takes up the full vertical space and allows the content within the tabs to be scroll

I have created a sandbox demo to illustrate my issue. My goal is to make the content of tabs scroll when necessary but fill to the bottom if not needed. I believe using flex columns could be the solution, however, my attempts so far have been unsuccessful. ...

htmlcssvue.jsprimevue

Crafting a triangle's shape using user inputs and a button: a step-by-step guide

I recently created a form similar to the one shown above, but I omitted the triangles on the left and right sides. However, after implementing this feature, my form became static instead of adaptive (I specified sizes in pixels based only on my browser). ...

htmlcsscss-shapes

Ways to adjust dimensions depending on zoom level or screen size

Here is the HTML code snippet: <div id="divMainFirst"> <div id="divInnerFirst"> <div id="divTitleHeaderUC"> <span id="spanTitleHeaderUC">Urgent Care Wait Time</span> </d ...

htmlcss

What's preventing it from being cached?

So, I have a website (https://illution.dk) and most of my files that are included or linked are returning a "304 Not Modified" header. However, there is one exception: https://illution.dk/include/style.php, which always returns a "200 OK." The headers for ...

phphtmlcsscachinghttp-headers

Tips for arranging five images side-by-side in a row

I have a collection of 5 images: Image 1: Image 2: Image 3: Image 4: Image 5: The dimensions of each image are as follows: Image 1: 70x40 Image 2: 80x42 Image 3: 90x44 Image 4: 100x46 Image 5: 120x48 I would like to arrange these images ...

htmlcssimage

CrossBrowser - Obtain CSS color information

I'm attempting to retrieve the background color of an element: var bgcolor = $('.myclass').first().css('background-color') and then convert it to hex function rgbhex(color) { return "#" + $.map(color.match(/\b(\d+ ...

javascriptjqueryhtmlcss

What is the best way to show an error message on a webpage using jQuery within a PHP environment?

I have a form in HTML that includes a submit button for posting status on a page. When a user clicks the submit button without entering anything into the form field, I want PHP to display a simple error message on the same page saying "This status update s ...

javascriptphpjqueryhtmlcss

What are the steps for implementing responsive design animation in my particular scenario?

Can someone please help me with a strange bug in Chrome? I am trying to create a responsive design for my app. The width of the 'item' element should change based on the browser's width. It works fine when the page first loads in Chrome, b ...

javascripthtmlcssanimation