StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POBreak UL into multiple columns
text
Body
copied!<p>It is difficult to extract code and post it here, so I'm posting a sample site which demonstrates my problem. I've been thinking about this, and there are several ways to solve this problem (HTML modification, CSS + HTML modification, CSS + JS modification), but since I'm a n00b at web coding, I want to know what is the best plan of attack here.</p> <p>Anyways, the problem:</p> <p><strong>Have a look here:</strong> <a href="http://321cart.com/sellya/" rel="nofollow noreferrer">http://321cart.com/sellya/</a></p> <p>Open the <strong>Categories</strong> Navigation menu, and you get this:</p> <p><img src="https://i.stack.imgur.com/wfxmq.png" alt="enter image description here"></p> <p>All those links under the categories are <code>ul</code> containing lots of <code>li</code>. I want to break the list and spread the list of multiple columns, <em>so that there are only a maximum of 3 <code>li</code> in one column</em>. Here is an example of what I want to do:</p> <p><img src="https://i.stack.imgur.com/FH3l7.png" alt="enter image description here"></p> <p>This is the overall thing that I want:</p> <p><img src="https://i.stack.imgur.com/udp7M.png" alt="enter image description here"></p> <p>This will cause the menu width to increase (virtually double, in theory), but that is okay for me. I can deal with this on my own.</p> <p>There are several methods to do this, but I would prefer if there's some way to do this using only CSS modification. If not, then maybe through CSS and JavaScript modification ? I want to reserve changes to actual HTML code as a last resort, because that is the original PHP HTML generation OpenCart code which I don't want to modify.</p> <p>Please note that I did try to resolve this problem on my own, but it proved to be a little complex .. So don't think I didn't try .. Secondly, posting this in a JSFiddle would have been difficult to, and it would not have truly represented the actual problem fully, which is why I'm posting a link to a sample site.</p> <p>Please have a look guys. Site: <a href="http://321cart.com/sellya/" rel="nofollow noreferrer">http://321cart.com/sellya/</a></p> <p>So I need some answers for this problem that has me baffled.</p> <p><strong>EDIT:</strong></p> <p>Forgot to point this out. In the example I provided, all <code>ul</code>s had more than 3 <code>li</code>s each, but in my actual case, only a few <code>ul</code>s have more than 3 <code>li</code>s each, and I <strong>only</strong> want to extend those ones to 2 columns, not the ones will 1, 2 or 3 <code>li</code>s each.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload