1

I've got the standard drop down layout that many people use, nested <ul> elements inside of <li> elements. Here's the thing: I want to get those child <li> elements to show in columns. Assuming I have 20 items, I would like four rows of five elements. I've been doing this by outputting a <span> tag around each group of 5 list items, only to foolishly forget that span is not allows as a direct child of an unordered list. E.G

<span class="col">
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</span>

This, visually, works fine but obviously won't validate. I've searched around a lot for solutions to this and I'm seriously stuck. Does anyone know how I can display these list items in columns? I've also read (didn't know) that <li> elements may only have <ul>, <ol> and <menu> as parent elements, which isn't much use at the moment. The best I can think of is;

<ul>
    <li></li>
    <li></li>
    <li>
        <ul><!--drop down with columns-->
            <li><!--column-->
                <ul>
                    <li></li>
                    <li></li>
                </ul>
            </li>

            <li><!--column-->
                <ul>
                    <li></li>
                    <li></li>
                </ul>
            </li>

            <li><!--column-->
                <ul>
                    <li></li>
                    <li></li>
                </ul>
            </li>

            <li><!--column-->
                <ul>
                    <li></li>
                    <li></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

...which looks very wasteful of HTML. Any ideas..?

Thanks, Dan.

9
  • Your example markup actually looks fine to me: it is robust and will work cross-browser. That said, what browsers are you aiming to support? And does the order of your sub-items matter? Finally, do you have a design showing what you're trying to achieve visually? Nov 12, 2013 at 11:03
  • @CherryFlavourPez Hi, it does work (top fragment of code), but validation fails because <span> is a direct child of a <li> element. I don't have an example to hand, but basically it's a full width drop down (960px for example), with 4 columns. The links are arranged like this: <span> link 1, 2, 3, 4, 5 and then </span>. The pattern then carries on that way to fill the remaining columns.
    – Dan
    Nov 12, 2013 at 11:11
  • The nested <ul> HTML you provided looks good, I'd go with that. It's not wasteful HTML if it's semantically the correct structure. Nov 12, 2013 at 11:33
  • Your own html, see demo here - jsbin.com/asenEnIH/1/edit Nov 12, 2013 at 11:48
  • What are your cross-browser requirements? IE support needed? oldIE? Nov 12, 2013 at 12:20

2 Answers 2

1

If IE 9 and older aren't a priority, you can use CSS columns to achieve what you want:

http://jsfiddle.net/kXDDL/1/

Browsers that don't support it (IE 6,7,8,9) will still show your menu just fine, except in a straight vertical column (which is the usual way menus are shown so should be fine). Alternatively, you could use a polyfill for non-supporting browsers.

EXAMPLE CODE:

<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>Child 3</li>
            <li>Child 4</li>
            <li>Child 5</li>
            <li>Child 6</li>
            <li>Child 7</li>
            <li>Child 8</li>
            <li>Child 9</li>
            <li>Child 10</li>
            <li>Child 11</li>
            <li>Child 12</li>
            <li>Child 13</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:
http://caniuse.com/multicolumn
http://www.w3.org/TR/css3-multicol/

4
  • I do like this solution, but browser support is an issue. For a fallback, I guess I could float all <li> elements left with a 25% width. They won't look the same, but sod that : )
    – Dan
    Nov 12, 2013 at 15:06
  • @Dan I've updated my answer to include polyfills that you can use, if that's your preference. Nov 12, 2013 at 22:48
  • Many thanks Mark - I'll check out the polyfills. I think this is the most futureproof example, but in the end (on this job) I've gone for extra ul's and li's to sort out the issue. For future usage I'd like to build your idea into my little menu plugin!
    – Dan
    Nov 13, 2013 at 0:15
  • Cheers Dan. I understand the need to be pragmatic. Good luck with your project. Nov 13, 2013 at 0:19
0

sTry with some css.

add a class to the lines:

<li><!--column-->

something like:

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

Then you can add somewhere the css rule:

.column{
 float:left;
}

This should do the trick.

EDIT: I'm still not sure if i understand the problem but i'll try again :)

<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 less of a waste of html code? (cause to me your nested li's seem perfect).

6
  • Otherwise you can always create a <table> if you need to add a table structure.
    – nowhere
    Nov 12, 2013 at 11:08
  • Hi @CosLu, this is pretty easy, the problem is the order of links in the column. I don't want them going "sideways", they need ordering 1, 2, 3, 4, 5 in a single column, and then 6, 7, 8, 9, 10 in the next column.
    – Dan
    Nov 12, 2013 at 11:12
  • So you just want to achieve the result of your second example with less html code? I edited the answer.
    – nowhere
    Nov 12, 2013 at 11:21
  • Pretty much, yes. As long as it's in columns some how.
    – Dan
    Nov 12, 2013 at 15:01
  • I don't think that will work as a div element is also not allowed as a child of an <li> element?
    – Dan
    Nov 12, 2013 at 15:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.