Troubleshooting: The CSS nested menu does not adjust its width automatically

Within my nested menu, everything is functioning correctly except for the third hierarchy level.

I have the code and the result available here: http://jsfiddle.net/wvsL9/

If you hover over the menu "PRODUCTS" and then "PRIVATE", you will notice that the width does not adjust to "auto". I've been trying different variations but seem to be stuck. Can anyone help me figure out why it's not working as intended?

Thank you in advance!

#menu, #menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.9em;
    font-family:'Helvetica Neue For BBC W01 Bd';
}

#menu:before,
#menu:after {
    content: "";
    display: table;
}

#menu:after {
    clear: both;
}

.... (remaining CSS code)
cssmenu

Answer №1

To handle this, simply utilize width: auto; on the specified element. Insert the following code snippet:

#navigation ul ul {
    width: auto;
}

Check out this JSFiddle demo

Answer №2

Include the following css styles:

#menu .sub-menu{width:auto; min-width:100%;}

Take a look at this example http://jsfiddle.net/wvsL9/3/

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

Changing between two images using HTML and CSS

I am currently designing a WordPress theme and I would like to create an effect where two different thumbnail images switch on hover. The code that I have come up with so far looks something like this : <a class="thumb" href="posturl"> <img src= ...

javascripthtmlcsshover

Alignment problem with the text on the left

Utilizing remodal.js from the repository found at https://github.com/VodkaBears/Remodal to develop a modal interface: http://jsfiddle.net/j4wnov5z/. In essence, I am trying to align certain elements to the left, but encountering difficulties. For instanc ...

javascriptjqueryhtmlcss

Activating the CSS :active selector for elements other than anchor tags

How can I activate the :active state for non-anchor elements using JavaScript (jQuery)? After reading through Section 5.11.3 of the W3C CSS2 specification in relation to the :hover pseudo selector in hopes of triggering the activation of an element, I stu ...

javascriptjquerycss

What is the best way to import a file in meteor version 1.3?

Trying to incorporate react-datepicker into a meteor 1.3 and react project has been quite successful so far. The only issue I am facing is the inability to access any of the css styles from the package. According to the readme, I'm supposed to requir ...

javascriptcssmeteorreactjs

What could be the reason for the text covering the image on the larger breakpoint?

I am having an issue with this code where the Lorem Ipsum text is not staying centered at all times. Instead, it overlaps the image when I reach the large breakpoint. Can you please explain why this is happening and suggest a solution? Here is the curren ...

htmlcssbootstrap-4

Unique styling tricks for div widths in Chrome

I have created a navigation section with dropdown buttons. I want the width of the divs to adjust based on the text length. In Firefox, everything looks good and works as expected. However, when I checked the site in Chrome, the navigation section behave ...

htmlcssgoogle-chrome

The slider thumb on materialized CSS HTML5 Range is not visible

After updating to Materialize 1.0.0, I noticed that the thumb is not showing on the HTML5 range input. Interestingly, when using Materialize 0.100.2 or 0.97.3, the thumb is displayed correctly. Unfortunately, I can't revert back to the older version ...

cssmaterialize

Background color vanishes (occasionally) on the contact section of my website when viewed in Chrome

My contact page has an issue that only occurs in Chrome, where the background disappears most of the time. This problem is not present in Firefox, Edge, or Safari on my TA's MacBook, but interestingly, hovering over a box resolves the issue on her dev ...

htmlcssgoogle-chrome

Increase division height when mouse hovers over it

I want the height of the div to be 50px by default and change to 300px onmouseover. I have implemented this as follows: <style type="text/css"> #div1{ height:50px; overflow:hidden; } #div1:hover{ height:300px; } </style> <body> <div i ...

javascriptjqueryhtmlcss

Develop a gallery similar to YouTube or Vimeo

Is there a way to display a collection of SWF movies in a single DIV, with one SWF already set as the default? Something like a photo gallery but for SWFs. I would like to implement this using JQuery. Any suggestions or tips on how to achieve this? ...

javascriptjqueryhtmlcss

Is using transform scale in CSS to scale SVG sprites a valid method of scaling?

I have been using an SVG sprite as a CSS background image in this manner: .icon-arrow-down-dims { background: url("../sprite/css-svg-sprite.svg") no-repeat; background-position: 16.666666666666668% 0; width: 32px; height: 32px; display: inline-b ...

htmlcsssvg

Closing an Electron Dialog triggers a refresh on my current page

I currently have an Electron application in place. It utilizes Bootstrap v4, Electron v2, as well as other node modules. One concern I am facing is related to a button that triggers an Electron dialog box where users can select a folder. Upon selecting th ...

htmlcssnode.jsbootstrap-4electron

Adjust the vertical size of a table cell

I am currently working on code that was written by someone else and I am facing an issue with a 3 block element that needs to be modified. My goal is to change the height of the first block so that it only goes as big as the image inside it. Despite my e ...

htmlcssemailhtml-email

Creating a customized icon scheduling feature with CSS

Creating an icon using CSS that looks like the one below seems to be quite challenging. I attempted to achieve it with this approach, but the result was not satisfactory. https://i.stack.imgur.com/5W7Hj.png .schedule { height: 10px; width ...

htmlcss

What is the correct way to implement overflow-y: auto for vertical flex-items?

Check out this interactive example. Here is the HTML code: <div class="overflow"> <div class="block"> <div class="header"> This is a green header </div> <div class="content&q ...

htmlcssflexbox

Text area in the footer of a Bootstrap-4 modal that can be scrolled through

In my Angular-6 project, I am implementing a Bootstrap-4 modal. The Modal-Header has a fixed height, Modal-Body is scrollable, and Modal-Footer has a variable height but is not scrollable. Below is a snippet of my basic HTML: /*for debugging purpose*/ ...

javascripthtmlcssbootstrap-4

Navigate to designated part of a website using HTML and CSS styling

Consider the following JavaScript code: //Scroll Down button $(window).scroll(function () { if ($(this).scrollDown() > 100) { $('.containerScroll').fadeIn('slow'); } else { $('.containerScroll').fadeOut('slow'); } ...

javascripthtmljquerycss

What is the best way to position an image in the middle of a Bootstrap 5 Carousel?

I utilized the Bootstrap documentation and everything is functioning properly, but I am facing an issue with aligning the logo in the center of the carousel, especially when the image transitions. I attempted using a relative parent element, but it seems ...

htmlcssbootstrap-5

Showcasing tooltip when hovering over Font Awesome icon

My datatables grid includes some font awesome icons to represent actions like edit, delete, etc. Here's a visual representation of how they appear: https://i.sstatic.net/W0VQi.png Take a look at the accompanying HTML code: <td> <a a ...

htmlcssasp.net-core-2.0

What's the best way to make div columns appear closer together when floating?

Check out My CodePen: http://example.com/codepen Hello there, today I am working on a 6-column layout with 3 columns in each row. The 3rd column is quite long and resembles a sidebar. According to the design, columns 4 and 5 should be positioned close to ...

csshtmlcss-float