WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I'm looking for an easy to use step by step guide on how to create a MultiColoumn menu for categories on wordpress.

Actually in my blog I have 10/12 "main" categories and a couple of them have something like 50 Sub-categories and I will add more so I need something Automatic to show them in my menu. Actually I have one but it is full of bugs. So I need something new please.

This is my CSS (you can also write it from scratch, maybe it's better :P)

.videoCssMenucontainer {margin: 2px 0 0;}
UL.ws_css_cb_menu {background-color : #7F9DB9;width : 96%;margin:0 1.75% 10px 1.75%;font : bold 13px Arial, Helvetica, sans-serif;display : block;float : left;height : 33px;border-top-right-radius : 0;border-bottom-right-radius : 10px;border-bottom-left-radius : 10px;border-top-left-radius : 0;position:relative;z-index:10000;}
UL.ws_css_cb_menu LI {display : block;margin : 2px 0 0 2px;float : left;}
UL.ws_css_cb_menu A:hover UL, UL.ws_css_cb_menu A:hover A:hover UL, UL.ws_css_cb_menu A:hover A:hover A:hover UL {display : block;}
UL.ws_css_cb_menu A {display : block;vertical-align : middle;border-width : 0;border-color : #6655ff;border-style : solid;padding : 2px;color : #444444;text-decoration : none;text-align : left;}
UL.ws_css_cb_menu SPAN {overflow : hidden;}
UL.ws_css_cb_menu LI A:hover, UL.ws_css_cb_menu LI A {padding : 9px;color : #763319;}
UL.ws_css_cb_menum LI A:hover, UL.ws_css_cb_menum LI A {padding : 4px;font-weight : normal;color : #000;}
UL.ws_css_cb_menu UL {position : absolute;left : -1px;top : 98%;width : 160.65px;background-color : #ffffff;}
UL.ws_css_cb_menu UL UL {position : absolute;left : 98%;top : -2px;}
UL.ws_css_cb_menu, UL.ws_css_cb_menu UL {margin : 0;list-style : none;padding : 0 2px 2px 0;}
UL.ws_css_cb_menu A:active, UL.ws_css_cb_menu A:focus {outline-style : none;}
UL.ws_css_cb_menu UL LI {float : left;width : 150px;}
UL.ws_css_cb_menu UL A {white-space : nowrap;text-align : left;}
UL.ws_css_cb_menu LI:hover {position : relative;}
UL.ws_css_cb_menu LI:hover > A {background-color : #fff;color : #000;border-color : #665500;border-style : solid;text-decoration : none;}
UL.ws_css_cb_menu LI A:hover {position : relative;background-color : #fff;color : #000;text-decoration : none;border-color : #665500;border-style : solid;}
UL.ws_css_cb_menum LI A:hover {background-color : #ffc000;}
UL.ws_css_cb_menu IMG {border : none;float : left;margin-right : 4px;width : 16px;height : 16px;}
UL.ws_css_cb_menu UL IMG {width : 16px;height : 16px;}
UL.ws_css_cb_menu UL, UL.ws_css_cb_menu A:hover UL UL {display : none;z-index : 99999;}
UL.ws_css_cb_menu LI:hover > UL {display : block;}
UL.ws_css_cb_menu SPAN {display : block;padding-right : 11px;background-position : right center;background-repeat : no-repeat;}
UL.ws_css_cb_menu LI A TABLE, UL.ws_css_cb_menu LI A:hover TABLE {border-collapse : collapse;margin : -4px 0 0 -9px;border : 0 solid #000000;padding : 0;}
UL.ws_css_cb_menu LI A TABLE TR TD, UL.ws_css_cb_menu LI A:hover TABLE TR TD {padding : 0;border : 0 solid #000000;}
UL.ws_css_cb_menu LI A TABLE UL, UL.ws_css_cb_menu LI A:hover TABLE UL {border-collapse : collapse;padding : 0;margin : -4px 0 0 -9px;}
UL.videoCssMenu {font-size : 13px;width : 96%;margin:0 1.75% 10px 1.75%;background : #7F9DB9;color:#FFF;text-shadow: rgba(0, 0, 0, 0.398438) 1px 1px 1px;border : 0 solid #000000;}
UL.videoCssMenu .videoMenuTitleImage {margin : -2px 0 0 -2px;width : 79px;height : 30px;}
UL.videoCssMenu UL {left : 0;background-color : #857DA2;width : 430px;}
UL.videoCssMenu LI A {color:#FFF;text-shadow: rgba(0, 0, 0, 0.398438) 1px 1px 1px;padding: 5px !important;text-transform:uppercase;}
UL.videoCssMenu UL LI A {overflow: hidden; float:left;}
UL.videoCssMenu UL LI {width : auto;float : left;height : 27px;}
UL.videoCssMenu LI:hover > A, UL.videoCssMenu LI A:hover {background-color : #ffffff;border-radius : 5px;border-color : #fff;padding : 5px !important ;color : #000;}
UL.videoCssMenu LI UL LI:hover > A, UL.videoCssMenu LI UL LI A:hover {background-color : #ecb899;border-color : #fff;padding : 5px;color : #000;}
ul.ws_css_cb_menu ul ul ul{background:#ccc;color:#142E51;text-shadow:1px 1px 1px #000;}
ul.ws_css_cb_menu ul ul ul a{color:#142E51;text-shadow:1px 1px 1px #000;}
.ws_css_cb_menum LI {width:auto;height:20px;}

And this is my HTML/PHP:

<ul class="ws_css_cb_menu videoCssMenu">
    <li><a href="http://downloadtaky.info" title="Downloadtaky.info | Download FREE Film IPA Serie TV">Home</a></li>
        <a href="#">Categorie</a>
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul class='ws_css_cb_menum'>
            <?php wp_list_categories('sort_column=name&sort_order=name&style=list&children=true&hierarchical=true&title_li=0&dept=5&show_count=1&feed_image=/images/RSS.png'); ?>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        <a href="#">Pagine</a>
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul class='ws_css_cb_menum'>
            <?php wp_list_pages('title_li='); ?>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        <a href="#">Hack</a>
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul class='ws_css_cb_menum'>
            <li><a href="http://proxy.downloadtaky.info">Proxy</a></li>
            <li><a href="http://hide.downloadtaky.info/">Url Hider</a></li>
            <li><a href="http://html2bbcode.downloadtaky.info">HTML 2 bbCode Converter</a></li>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        <a href="#">Seo</a>
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul class='ws_css_cb_menum'>
            <li><a href="http://pagerank.downloadtaky.info/">Pagerank</a></li>
            <li><a href="http://seo.downloadtaky.info/">FREE Seo Services</a></li>
            <li><a href="http://submit.downloadtaky.info/">Url Submitter</a></li>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        <a href="#">Servizi CSS</a>
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul class='ws_css_cb_menum'>
            <li><a href="http://buttongenerator.downloadtaky.info/">CSS Button Generator</a></li>
            <li><a href="http://favicon.downloadtaky.info/">Favicon Generator</a></li>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        <a href="#">Generatori Link Premium FREE</a>
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul class='ws_css_cb_menum'>
            <li><a title="Megavideo Unlocker, supera il limite di Megavideo" href="http://www.premiummu.com/megavideounlocker.php">Supera il limite di Megavideo</a></li>
            <li><a title="Fileserve, Megaupload,Uploading FREE Premium Link Generator" href="http://www.premiummu.com/premiumlinkgenerator.php">Premium link generator</a></li>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    <?php include('supsearch.php');?>

I don't care about IE6 anymore, IE7 support will be enough, thank you to all for your help!

share|improve this question
I don't understand the relevance of including the css and html and then just asking hey somebody code this for me? What exactly is your question? – Chris_O Apr 24 '11 at 23:20
@Chris_O My question is have you got a working code or could you please take a look to my code and tell me where I'm wrong? – Downloadtaky Apr 24 '11 at 23:23
@Chris_O Why you gave me a negative vote? – Downloadtaky Apr 24 '11 at 23:24
You didn’t say what you have tried already, what you want to get and how your problem relates to WordPress. It looks like a pure HTML/CSS issue. – toscho Apr 24 '11 at 23:54
@toscho @Chris_O the problem is related to wordpress because create a multicoloum drop down menu is quite easy if this menu is "static" and not related to wp_list_categories. What I tryied is what you can see. If you want a live preview take a look to my website: downloadtaky.info, the menu on top is what I have now. – Downloadtaky Apr 25 '11 at 12:21
up vote 3 down vote accepted

You are overloading the taxonomy category. Learn to use custom taxonomies. Some of your categories are in fact series, others belong into their own taxonomy too.

Replace the hard coded navigation ul with a nav menu and look into the TwentyTen theme: it has a working solution for your problem. You can use your own walker to adjust it even more.

But the first step to get a more professional look for your website is: drop Comic Sans. ;)

share|improve this answer
You are right Comic was a bad idea :-) I'll change it when I'll release my next template, as soon as I'll find a solution to my problem. Can I ask you to code it for me? How much will it costs? You are the only one who gave me a real answer instead of all bad reputation comments others gave me :-) – Downloadtaky Apr 25 '11 at 22:18

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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