Creating a drop-down layout with multiple columns can improve the organization and aesthetics of your webpage

Question

Creating a drop-down layout with multiple columns can improve the organization and aesthetics of your webpage

Looking to achieve a column layout for child <li> elements within nested <ul> elements? Currently, I have the traditional dropdown structure with multiple <ul> items inside <li> tags. My goal is to display these child list items in columns, like having 20 items arranged as four rows of five elements each.

I initially tried wrapping each group of 5 list items in a <span>, but this violates HTML rules since <span> cannot be a direct child of an unordered list. Visually, it works fine, but lacks validation. After researching for solutions, the closest approach I found involves nesting additional <ul> elements within parent <li> tags to simulate column layouts.

However, this method seems excessive and inefficient in terms of HTML markup. If anyone has suggestions on how to efficiently display these list items in columns without violating HTML standards, please share your ideas.

Thank you, Dan.

html css drop-down-menu multiple-columns

Answer 1

Answer №1

To achieve the desired layout, you can utilize CSS columns if IE 9 and older browsers are not a priority:

View Example Here

If browsers such as IE 6, 7, 8, and 9 do not support the CSS columns, your menu will still display correctly in a standard vertical format. Alternatively, consider using a polyfill for unsupported browsers.

Below is an example code snippet:

<ul class="parent-list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Daddy 1
        <ul class="child-list">
            <li>Child 1</li>
            <li>Child 2</li>
            <li>...</li>
        </ul>
    </li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
</ul>

.parent-list > li {
    float: left;
}

.child-list {
    position: absolute;
    width: 400px;
    -webkit-column-width: 100px;
       -moz-column-width: 100px;
}
.child-list > li {
    width: 100px;
}

POLYFILLS:
CSS3MultiColumn
Columnizer

REFERENCES:
Browser Support Info
W3C Documentation

Answer 2

To achieve the desired layout, you can utilize CSS columns if IE 9 and older browsers are not a priority:

View Example Here

If browsers such as IE 6, 7, 8, and 9 do not support the CSS columns, your menu will still display correctly in a standard vertical format. Alternatively, consider using a polyfill for unsupported browsers.

Below is an example code snippet:

<ul class="parent-list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Daddy 1
        <ul class="child-list">
            <li>Child 1</li>
            <li>Child 2</li>
            <li>...</li>
        </ul>
    </li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
</ul>

.parent-list > li {
    float: left;
}

.child-list {
    position: absolute;
    width: 400px;
    -webkit-column-width: 100px;
       -moz-column-width: 100px;
}
.child-list > li {
    width: 100px;
}

POLYFILLS:
CSS3MultiColumn
Columnizer

REFERENCES:
Browser Support Info
W3C Documentation

Answer 3

Answer №2

Experiment with some CSS.

Include a class in the lines:

<li><!--column-->

Try adding something like:

<li class="column"><!--column-->

Then, insert the CSS rule somewhere:

.column{
 float:left;
}

This should solve the issue.

UPDATE: I'm still uncertain if I grasp the problem correctly, but I'll give it another shot :)

<div class='column'>
<ul>
<li></li>
<li></li>
</ul>
</div>

<div class='column'>
<ul>
<li></li>
<li></li>
</ul>
</div>

.column{
 float:left;
}

Is using floated divs a more efficient use of HTML code? (Because to me your nested li's appear ideal).

Answer 4

Experiment with some CSS.

Include a class in the lines:

<li><!--column-->

Try adding something like:

<li class="column"><!--column-->

Then, insert the CSS rule somewhere:

.column{
 float:left;
}

This should solve the issue.

UPDATE: I'm still uncertain if I grasp the problem correctly, but I'll give it another shot :)

<div class='column'>
<ul>
<li></li>
<li></li>
</ul>
</div>

<div class='column'>
<ul>
<li></li>
<li></li>
</ul>
</div>

.column{
 float:left;
}

Is using floated divs a more efficient use of HTML code? (Because to me your nested li's appear ideal).

Creating a drop-down layout with multiple columns can improve the organization and aesthetics of your webpage

Answer №1

Answer №2

Similar questions

Develop a tree structure that showcases various directory paths

Transforming CSV CSS values with jQuery's CSS method: Step-by-step guide

Changing the width of an SVG path from 0 to 100% using CSS

Adding a PHP file into an HTML page using JavaScript include

Discovering the exact measurement of "remaining space" in absolute units with flexbox techniques

Cover the whole page in darkness and emphasize the division element

What is the proper way to insert a line break within a string in HTML code?

Resizing the background while scrolling on a mobile web browser

Accessing a key from an AJAX JSON response and applying it within a .each() loop in jQuery

Concealing a div element while ensuring that it does not obscure any of its contents

Spin: twist beyond 360 degrees or less than 0 degrees

Arrange and pile up 3 columns using Bootstrap 4

Guide on showing the D3 Color legend in a horizontal orientation instead of a vertical one

Need for Jekyll to Incorporate "excerpt" Liquid Tag in YAML Front Matter

In PHP/HTML, if the URL is domain.co.uk/?debug, then the following action will

Selector matching a descendant element in React styling

How to prevent click events and still enable scrolling within a DIV using CSS/JS

I'm looking to update the background of a webform in asp.net razor - any tips on how to

Invisible Thinglink image revealed upon resizing browser

Challenges faced when using Selenium with Telerik RadMenu