CSS menu cascading dilemma due to overflow problem

My CSS-based drop down menu works perfectly, but now I want to add a sub-menu that is also visible. However, I am encountering an issue where the height of the main menu list expands when the sub menu is displayed.

http://jsfiddle.net/GzfFs/

.cascade_content {
/* cascading sub menu */
display: none;
z-index: 103;
position: relative;
background: #FFFFFF;
border: 1px solid #8C8C8C;
padding: 10px 0px 10px 0px;
width: 190px;
left: -192px;
top: -26px;
-moz-box-shadow: 0 2px 6px 0px #8C8C8C;
-webkit-box-shadow: 0 2px 6px 0px #8C8C8C;
box-shadow: 0 2px 6px 0px #8C8C8C;

}

It appears that setting position:relative in the sub menu is causing this issue. Changing it to position:absolute causes the problem of it not appearing correctly. Any assistance from those with more CSS expertise would be greatly appreciated!

csspositionoverflow

Answer №1

Visit this link for a detailed demonstration

.dropdown_content li {position: relative}
.cascade_content {position: absolute}

To achieve the desired positioning, consider nesting your UL elements inside the LI elements.

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

Crafting a dynamic inline search form with Bootstrap

My goal is to replicate the design in this image: This is my current progress: ...

htmlcss

Adjusting the size of the iframe to match the dimensions of the window

Is there a way to make the iframe automatically fill up the entire space? For example, only opens the iframe up to half of the window in Mozilla Firefox and IE6. How can I ensure that it takes the maximum size of the screen? Are there any CSS or JavaScr ...

javascriptcssiframesize

Creating a Personalized and Adaptable Grid Layout in Bootstrap 4

Here is the code snippet I'm working with: <html> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <style> .col-lg-3.custom { flex: 0 0 20%; ...

htmlcssbootstrap-4bootstrap-grid

At what point in the process does Angular/PrimeNG switch the CSS classes from 'p-' to 'ui-'?

So I've encountered quite a peculiar problem. I've managed to create a customized PrimeNG component that seems to be functioning properly, but there are a couple of issues at hand: Despite using ViewEncapsulation.None, just like with other Pri ...

cssangularprimeng

I am experiencing a CSS display issue on the mobile version of my map leaflet where only the header and footer are visible

I am experiencing a display issue on Android and iPhone due to conflicting css commands. Here's what's happening: I am using React + React Leaflet with a header, main, and footer all set to width 100% within a parent div with body set to width an ...

cssreactjsresponsive-designleaflet

Ways to toggle the sliding of text on and off an image?

After spending some time experimenting with my code, I managed to get it working. Essentially, when a user hovers over an image, text now appears over the image. Since this is a gallery, I had to utilize $(this).children in order to target and display the ...

javascriptjqueryhtmlcss

Manage several scrolls using overflow:auto

There are numerous popups on a page with the overflow:auto property. The structure is as follows - <div id="popup1"> <div>SomeHTMLSTRUC</div> <div>SomeHTMLSTRUC</div> <ul class="scroll"></ul> </div> ...

htmlcss

Is there a way to create a table cell that occupies zero space?

I have a very intricate table setup that resembles a tree structure, with only a few cells on the left and many on the right. I am looking to completely hide specific cells, along with their entire rows, using JavaScript based on their class. Using visibi ...

htmlcssfontscss-tables

Tips for handling the !important declaration when creating a customized bootstrap theme

Exploring the Color Dilemma After creating a simple website in Bootstrap 4.1 with a distinct shade of purple, I encountered an issue with specificity when it came to customizing button states. To address this, I introduced a CSS class called .btn-purple ...

htmlcssbootstrap-4css-selectors

When deployed, Angular 14 and Bootsrap 5 are functioning properly on a local environment but encountering issues on an online

My Angular application (version 14.2.0) is integrated with bootstrap (version 5.2.3). Upon building and deploying the application on a local IIS server, everything displays correctly as shown in the image below: https://i.sstatic.net/pLDs6.jpg However, w ...

javascriptcssangulardeploymentbootstrap-5

Switch the background image of a link within an accordion with a simple click

I'm attempting to create a toggle effect for a background image on a links within an FAQ accordion using javascript. After referencing this jsfiddle example (http://jsfiddle.net/QwELf/), I was able to get things to function. You can view my page in ...

javascriptcsstogglebackground-imageaccordion

HTML textarea fails to recognize inline styles

My journey with JHipster began recently when I embarked on my first project. Two entities were created, one of which resembles a blog. This particular blog entity has a content attribute that interacts with a textarea. In my blogs.html file, I allowed the ...

jqueryhtmlcssangularjs

Examples of how to specify a child class in CSS

Presented here is the following structure: <article class="media media--small 48"> <a href="#"> <img src="" class="media__img" alt=""> <i class="s s--plus"></i></a> <div class="media__body"> < ...

css

Is there a glitch with CSS skew, shadow, and hover effects in Chrome browser?

   I am facing an interesting problem where hovering over a skewed li element with a CSS3 transform and a shadow applied causes the generated shadow to display incorrectly. You can see the issue for yourself here - http://jsfiddle.net/mabbage/BLD5Z/1/ ...

htmlcsswebkit

The scrollbar style mixin in Sass is successfully applied to textareas, but fails to work in other types

I found an example on css-tricks.com that demonstrates a convenient mixin for custom scrollbars: @mixin scrollbars($size, $foreground-color, $background-color: mix($foreground-color, white, 50%)) { // For Google Chrome &::-webkit-scrollbar { w ...

htmlcsssass

Can CSS be used to target HTML elements that come after another regardless of their position in the document?

Is there a way to style any <h1> element(s) that come after an <h2> element using only CSS? I've searched through countless pages of CSS documentation, trying to figure out if it's possible to target specific elements that appear AFT ...

htmlcsscss-selectorsxhtmlpseudo-class

When the getImageData event is triggered upon loading

Hello, I have a script that identifies transparent and non-transparent pixels. Currently, the result is displayed from a 100px by 100px rectangle on mouseover: var data = ctx.getImageData(100,100, canvas.width, canvas.height).data; During mouseover, it s ...

javascripthtmlcssoopecmascript-5

Webpack struggles with handling css using the css-loader when trying to implement (react)-css-modules

Trying to set up webpack with react and (react)-css-modules, but encountering an issue where webpack is unable to parse the css. This is the standard configuration being used. const webpack = require("webpack"), merge = require("webpack-merge"), path ...

cssnode.jsreactjswebpackcss-loader

A fixed header for tables that shifts along with horizontal scrolling

Seeking assistance with a persistent issue - I have a table with a fixed header on vertical scroll (see CSS and Javascript below), but the header fails to move horizontally when I scroll. window.onscroll = functi ...

javascripthtmlcss

Could Chrome be miscalculating em unit values in media queries?

I have defined my media query breakpoints as shown below: @media screen and (max-width:48em){ /* phone */ } @media screen and (min-width:48.063em){ /* tablet */ } After using a PX to EM calculator to get the 48.063em value (as I was advised to us ...

cssgoogle-chromeresponsive-designmedia-queries