Creating a CSS dropdown menu where the child elements are made to match the width of their parent elements

I created a three-tier CSS drop-down menu that is functioning correctly, except for the width of the second and third tier list items. I've spent hours tweaking the code but haven't been able to achieve the desired look.

What I'm aiming for is to have the second tier items with a minimum width equal to their parent's width, extending past it if the content is longer. For the third tier, I want the items to adjust their width based on the longest item within that specific nested list.

If you'd rather see the code directly, here's the link to my current HTML and CSS: http://jsfiddle.net/kBVYD/1/

Here's the HTML snippet:

<div id="menu1">
    <ul class="menu">
        <li><a class="haschild" title="" href="">Home</a>
            <ul class="sub-menu">
                <li><a class="haschild" title="" href="">Sub Link 1</a>
                    <ul>
                        <li><a title="" href="">Sub Sub Link 1</a></li>
                        <li><a title="" href="">Sub Sub Link 2</a></li>
                        <li><a title="" href="">Sub Sub Link 3</a></li>
                    </ul>
                </li>
                <li><a title="" href="">Sub Link 2</a></li>
                <li><a class="haschild" title="" href="">Sub Link 3</a>
                    <ul>
                        <li><a title="" href="">Sub Sub Link 1</a></li>
                        <li><a title="" href="">Sub Sub Link 2</a></li>
                        <li><a title="" href="">Sub Sub Link 3</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a class="haschild" title="" href="">About Us</a>
            <ul class="sub-menu">
                <li><a title="" href="">Sub Link 1</a></li>
                <li><a title="" href="">Sub Link 2</a></li>
                <li><a class="haschild" title="" href="">Sub Link 3</a>
                    <ul>
                        <li><a title="" href="">Sub Sub Link 1</a></li>
                        <li><a title="" href="">Sub Sub Link 2</a></li>
                        <li><a title="" href="">Sub Sub Link 3</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a class="haschild" title="" href="">Our Services Etc Etc Etc</a>
            <ul class="sub-menu">
                <li><a title="" href="">Sub Link 1</a></li>
                <li><a class="haschild" title="" href="">Sub Link 2</a>
                    <ul>
                        <li><a title="" href="">Sub Sub Link 1</a></li>
                        <li><a title="" href="">Sub Sub Link 2</a></li>
                        <li><a title="" href="">Sub Sub Link 3</a></li>
                    </ul>
                </li>
                <li><a class="haschild" title="" href="">Sub Link 3</a>
                    <ul>
                        <li><a title="" href="">Sub Sub Link 1</a></li>
                        <li><a title="" href="">Sub Sub Link 2</a></li>
                        <li><a title="" href="">Sub Sub Link 3</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    <div class="clear"></div>
</div>

And this is the corresponding CSS:

#menu1 *
{
    margin: 0;
    padding: 0;
}

#menu1 ul.menu
{
    float: left;
    font-family: "Arial", sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
}

#menu1 ul.menu li
{
    position: relative;
    float: left;
    list-style-type: none;
}

#menu1 ul.menu li a
{
    position: relative;
    display: block;
    line-height: 21px;
    font-size: 14px;
    padding: 14px 21px;
    text-decoration: none;
    z-index: 100;
}

#menu1 ul.menu > li:first-child > a
{
    border-left: 0;
}

#menu1 ul.menu > li:last-child > a
{
    border-right: 0;
}

/** Sub Menu - Tier 2 **/

#menu1 ul.menu li ul.sub-menu
{
    position: relative;
    display: none;
    margin: 0;
    padding: 0;
}

#menu1 ul.menu li:hover ul.sub-menu
{
    display: block;
    float: left;
    position: absolute;
    z-index: 200;
}

#menu1 ul.menu li ul.sub-menu > li:first-child
{
    margin: 5px 0 0 0;
}

#menu1 ul.menu li ul.sub-menu li a
{
    width: 140px;
    display: block;
}

#menu1 ul.menu li ul.sub-menu li:first-child > a
{
    border-top: 0;
}

#menu1 ul.menu li ul.sub-menu li:last-child > a
{
    border-bottom: 0;
}

/** Sub Menu - Tier 3 **/

#menu1 ul.menu li ul.sub-menu li ul
{
    position: relative;
    display: none;
    left: 100%;
}

#menu1 ul.menu li ul.sub-menu li ul li
{
    margin: 0 0 0 5px;
}

#menu1 ul.menu li ul.sub-menu li:hover ul
{
    display: block;
    float: left;
    position: absolute;
    top: 0;
}

#menu1 ul.menu li ul.sub-menu li ul li a
{
    width: 140px;
    display: block;
}


/** Colour Styles **/

#menu1 ul.menu li a
{
    background: #09F;
    color: #FFF;
}

#menu1 ul.menu > li > a
{
    border-left: 1px solid #26A8FF;
    border-right: 1px solid #0082D9;
}

#menu1 ul.menu li:hover > a,
#menu1 ul.menu li a:hover
{
    color: #09F;
    background: #ddd;
}

#menu1 ul.menu li ul.sub-menu li a
{
    border-top: 1px solid #26A8FF;
    border-bottom: 1px solid #0082D9;
}
cssdrop-down-menu

Answer №1

Remove the custom width you previously included:

#menu1 ul.menu li ul.sub-menu li a {
    width: 140px;
}

The issue at hand is that the ul.sub-menu is constrained by its relative parent, the <li>. To address this, utilize white-space: nowrap to extend it beyond the parent's boundaries. Then apply min-width to establish the minimum allowable width (or as mentioned earlier, "at least matching the parents' width").

#menu1 ul.menu li ul.sub-menu {
    min-width: 100%;
    white-space: nowrap;
}

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

Numerous objects come into view as you scroll

I found a code snippet online that animates items as they appear on scroll. However, the code only triggers animation for one item at a time. How can I modify the code to trigger the animation for all items? const observer = new IntersectionObserver(e ...

javascripthtmlcssanimation

Issue with React Js: Text Sphere not appearing on page reload

Currently immersed in a react.js environment and eager to incorporate this impressive animated text sphere. Utilizing the TagCloud package for rendering assistance, however, encountered an issue where the text sphere would only display once and disappear u ...

javascripthtmlcssreactjstag-cloud

The text color is being influenced by the transparent background behind it

I have a box with a transparent background color. Below is the CSS and HTML code that I'm using: CSS: #box { color: black; text-align: center; margin: 50px auto; background: blue; opacity: 0.1; border-radius: 11px; box-sh ...

htmlcsstransparencyopacity

Why does the DropDownList consistently remove the initial value?

I am currently in the process of developing a recipe website focused on meals. I have created an admin panel where I can manage the meals added to the site. One issue I am facing is with deleting a meal that was previously added. The menu displays the numb ...

c#htmlcssasp.net

Generate a secondary table row by utilizing the ::after pseudo-element

I need to add a sub-row to the last row of the table to achieve the look shown in the photo. I am attempting to use pseudo-classes for this purpose, but I am struggling with adjusting the height of the 'tr' element to accommodate the new content. ...

htmlcssbootstrap-4

Is the button not aligned properly with the email input field?

<div class="subscribe__form--action--btn"> <form action="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="32545b5e5b5746545C5B5356477F54585850"> </a>" meth ...

htmlcssbutton

Achieving a centrally aligned flex container with left-aligned flex items

My goal is to center the flex items, but when they go onto a second line, I want item 5 (from image below) to be positioned under item 1 instead of centered in the parent container. https://i.sstatic.net/GhD1E.png Here's a sample of my current setup ...

htmlcssflexbox

Navigating the jQuery Search Form: Redirecting to Pages within your Website

After successfully creating my first Javascript search form with an Autocomplete Script, I am facing a challenge. I want to enable users to press "enter" after searching for a product and get redirected to the corresponding product URL page. The operation ...

javascriptjquerycsshtml

Rendering of a drawer within an AppBar component

I set a container width limit of 600px on my app, but this caused the drawer to display incorrectly. Instead of rendering next to the page content, it appears inside the app bar. When the screen width exceeds 600px (the designated limit), the drawer ends ...

cssreactjsmaterial-uisidebardrawer

Floating a DIV causes it to shift down in a responsive layout at specific window sizes

My issue lies with a fluid layout that works well for the most part. However, at specific window widths, one of four floating div-elements unexpectedly shifts down. This inconsistency happens at nearly 20 different widths, differing by only one pixel. For ...

csshtml

Tips for making a div with a single triangular side using Reactjs

Hey there, I'm looking to design a header similar to the one shown in this image. Can someone provide guidance on how I can achieve this UI using React.js? https://i.sstatic.net/zmW5x.jpg ...

htmlcssreactjs

How can transitions be activated in Bootstrap 4 carousel?

Having an issue with my Bootstrap 4 carousel where I need to move 4 slides at a time. I have tried using the code below: $(this).carousel(4); However, the problem is that the carousel only jumps to that index without showing any transitions. Using $(this) ...

javascriptjquerycssbootstrap-4carousel

What is the best way to prevent a strikethrough from appearing on the delete button in my JavaScript TO-Do application?

I'm working on coding a to-do app using JavaScript, HTML, and CSS. The issue I'm facing is that when I add the text-decoration: line-through property to the list items, it also affects the X icon used for deleting tasks. I suspect this problem ar ...

javascripthtmlcss

Can you explain the purpose of the spaces on the buttons?

mysterious button spacing issue <div class="buttons"> <button id="btn-search" type="submit">Search Engine</button> <button id="btn-lucky" type="submit">Feeling Lucky Today</button> </div> .buttons { max-width: 29 ...

htmlcss

Expand the container as the child element grows using flexbox

Check out this layout: <div class="wrapper"> <div class="middleman"> <div class="inner-child"> /* Child with the ability to expand height */ </div> </div> </div> Imagine the wrapper has an initial hei ...

cssflexbox

arranging bootstrap containers to create a slideshow

Looking for advice on stacking containers in Bootstrap. I'm trying to create a page that functions like a PowerPoint presentation, where clicking on an image hides the current container and reveals the next one. This requires the containers/slides to ...

jquerycsstwitter-bootstrap

Challenge with aligning tables

I need assistance with aligning the TD tag value to the TH tag value as I am currently experiencing alignment issues. Can someone please help me resolve this problem? I have attempted to fix it on jsfiddle Here is the HTML code: <table class=" ...

htmlcsstwitter-bootstrap

Is there a way to rearrange html elements using media queries?

Here is a snippet of code showcasing how my website is structured for both desktop and mobile views. Display on Desktop <body> <div> <header> <div>example</div> <a><img src"my logo is here"/& ...

htmlcssresponsive-designmedia-queries

height issue with a div

I currently have a header, master container, and footer set up on my website. Within the master container, I have 2 separate containers: A on the left and B on the right. Even as the B container gets filled up, the A container remains static. Is there a ...

css

Firefox does not support padding-top in pseudo elements, unlike Chrome and Safari which do

I am aiming to create three square boxes that adjust their size based on the browser's dimensions. Each box will contain only one line of text, so I plan to use padding to fill any extra space. My website utilizes flexbox, and I initially thought I h ...

htmlcssflexbox