Displaying WordPress categories in a horizontal dropdown menu.

One of my readers recently asked how I created my horizontal menu bar: the short answer is by mixing CSS and Javascript.

The first step is to get WordPress to display the menu as a hierarchical list without a title. <?php wp_list_categories('sort_column=name&sort_order=asc&style=list&children=true&hierarchical=true&title_li=0'); ?>

We then wrap this WordPress code in the following so we can style it.

<div style="text-align:center;">
    <ul id="menu" style="padding:0; margin:0;">
        <?php wp_list_categories('sort_column=name&sort_order=asc&style=list&children=true&hierarchical=true&title_li=0'); ?>
    </ul>
</div>

I added this to my header.php, but you can add it anywhere you want it to appear.

The CSS is fairly simple and you just need to add it to your theme’s style.css file.

ul#menu {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
	font-size:1.2em;
}

ul#menu li {
	float: left;
	padding: 0;
	margin: 0;
	border-right:solid 1px #fff;
}

ul#menu ul li {
	float: none;
	position: relative;
	border-bottom: 1px solid #7EAED7; /* fixes gap problem in IE */
	border-left: 1px solid #FFF;
	z-index:1000;
}

ul#menu li ul {
	margin: 0;
	padding: 0;
	display:none;
	list-style: none;
	position: absolute;
	background: #9CC;
}
ul#menu ul ul{
	margin-left: .2em;
	position: absolute;
	top: 0; /* if using borders, -1px to align top borders */
	left: 100%;
}

ul#menu * a:hover, ul#menu li a:active{
background:#7EAED7 !important;
color: #FFFFFF;
}

ul#menu li a:link,
ul#menu li a:visited,
ul#menu li a:hover,
ul#menu  li a:active{
	display: block;
	padding: .2em .3em;
	text-decoration: none;
	background: #5587B3;
	 color: #FFFFFF;
}


ul#menu ul li a:link,
ul#menu ul li a:visited,
ul#menu ul li a:hover,
ul#menu ul li a:active {
	width: 8em;
}

Of course you will need to change the colors and text sizes to ensure it blends with the rest of the theme.

Now the last step is the to make it work as a drop-down list on all browsers. This could be done in Firefox with a simple CSS declaration, but Internet Explorer doesn’t understand the :hover pseudo classes, so we mimic this in Javascript.

<script type="text/javascript">
 /*<![CDATA[*/

var mbA,mbT,mbTf,mbSf;
var mbR = [];

function mbSet(m) {
if (document.getElementById&&document.createElement) {
	var m=document.getElementById(m);
	mbR[mbR.length] = m;
	var i;

	e=m.getElementsByTagName('a');
	if (!mbTf) mbTf=new Function('mbHT();');
	if (!mbSf) mbSf=new Function('mbS(this);');
	for (i=0;i<e.length;i++) {
		e[i].onmouseout=e[i].onblur=mbTf;
		e[i].onmouseover=e[i].onfocus=mbSf;
	}

	m=m.getElementsByTagName('ul');
	for (i=0;i<m.length;i++) {
		mbH(mbL(m[i]));
	}
}}

function mbHA() {
	if (mbA) {
		while (mbA) mbH(mbA);
		mbHE('block');
	}
}

function mbHT() {
	if (!mbT) mbT=setTimeout('mbHA();', 0);
}

function mbTC() {
	if (mbT) {
		clearTimeout(mbT);
		mbT=null;
	}
}

function mbS(m) {
	mbTC();
	if (mbA) while (mbA&&m!=mbA&&mbP(m)!=mbA) mbH(mbA);
	else mbHE('none');

	if (mbM(m)) {
		mbSH(m,'block');
		mbA=m;
	}
}

function mbH(m) {
	if (m==mbA) mbA=mbP(m);
	mbSH(m,'none');
	mbT=null;
}

function mbL(m) {
	while (m && m.tagName != 'A') m = m.previousSibling;
	return m;
}

function mbM(l) {
	while (l && l.tagName != 'UL') l = l.nextSibling;
	return l;
}

function mbP(m) {
	var p = m.parentNode.parentNode;
	if (p.tagName == 'UL') {
		var i = 0;
		while (i < mbR.length) {
			if (mbR[i] == p) return null;
			i++;
		}
	} else {
		return null;
	}
	return mbL(p);
}

function mbSH(m,v) {
	m.className=v;
	mbM(m).style.display=v;
}

function mbHE(v) {
	mbHEV(v,document.getElementsByTagName('select'));
}

function mbHEV(v,e) {
	for (var i=0;i<e.length;i++) e[i].style.display=v;
}
/*]]>*/
</script>

A couple notes on the previous code.

  1. To activate it, change your theme’s <body> tag to <body onload=”mbSet(‘menu’);>
  2. It was not written by me, but I’ve been using it for a long time and don’t remember where I got it.
  3. It can occasionally create a JavaScript error, and I’ve intended to rewrite it for a long time, but it usually works fine.

323 thoughts on “Displaying WordPress categories in a horizontal dropdown menu.

  1. Pingback: 40+ Most Wanted Wordpress Tricks and Hacks | Tut7

  2. Pingback: 33 Specific to WordPress Category Hacks And Useful Resources

  3. Pingback: 40 Most Wanted Wordpress Tricks and Hacks | blog

  4. Pingback: 35 WordPress Tips and Tricks You Must Know | SmashingHub

  5. Pingback: 40 WordPress Tips, Tricks, & Hacks | Ultimate Free Website

  6. Pingback: 60+ Awesome WordPress Tutorials | The Best WP Themes Online

  7. Pingback: YESURE技术博客 » 40个最值得应用的WordPress技巧和工具

  8. Pingback: 40+ Most Wanted Wordpress Tricks and Hacks | AddaZ ...::: Share Latest Things :::...

  9. Pingback: 136 Massive Wordpress Tutorial Collection | WebCoreStudio

  10. Pingback: 40个最值得应用的WordPress技巧和工具 - 行云流水

  11. Pingback: WP Hacks | [sk]

  12. Pingback: VietNamTips » 36 WordPress Tips, Tricks

  13. Pingback: 40+ Most Wanted WordPress Tricks and Hacks | WordPress Identity

  14. Pingback: MEGAPOST: 1001 trucos, consejos y plugins para wordpress | TAito Personal´s BLog

  15. Pingback: Top Collection Of WordPress Tutorials On The Web | Nerdy Geeks Blogging Guide

  16. Pingback: 40+ Most Wanted Wordpress Tricks And Hacks « Quadrated

  17. Pingback: 100+ Awesome Resource list for Wordpress | WebSenseLogic

  18. I follow your step, and it work fine but, when i try to click my Categories list it’s lost..
    and i Q how to make separate Categories and work like pages. im new with wp

  19. Pingback: 40多个最受欢迎的Wordpress技巧 | WordPress中文圈

  20. Pingback: 40多个最受欢迎的WordPress技巧 | ImJoYo, Im ❤"¢ç»ˆäºŽÂ°

  21. Pingback: zhq » Archive » 50个最强WordPress教程

  22. Pingback: » 50个最强WordPress教程 @ Cloud 1989

  23. Pingback: Wordpress: 40 Trucos y Consejos para | Proyecto Aurora

  24. Maybe you should edit the webpage title Displaying WordPress categories in a horizontal dropdown menu. to more suited for your webpage you write. I liked the blog post even sononetheless.

  25. Pingback: 50个最强WordPress教程 | Cloud 1989

  26. Forget it, I worked on this for such a long time but all I see is an ugly blue button for one of my categories, nothing else. I’m not going to go through all those comments above anymore because you should have re-edited your article instead of expecting readers to go through a pile of comments to understand whatever you meant. I’ll have to search for something more simpler perhaps. Thanks anyway.

  27. Pingback: WordPress 开发者资源 « WordPress

  28. Pingback: 135 link cung cấp thủ thuật wordpress hot nhất | Tạp Chí SEO

  29. Pingback: 135 webs/blog for wordpress tips |

  30. Pingback: Marsha.web.id » Menampilkan Kategori secara Dropdown

  31. Pingback: 135 trang web/blog thủ thuật wordpress hay nhất | Ninh Bình 24h

  32. Pingback: 精华分享网-分享互联网 » 50个最强国外WordPress教程

  33. Pingback: WordPress 开发者资源 | 春暖花开

  34. Pingback: wordpress教程 » 最实用30个Wordpress技巧

  35. WordPress has turned into a hobby for me and I just try to help friends whenever I can. accesorioscelularpr is a site I’m trying to build for my son. My main problem is that I like to make things on my own after I learn how to make them.

    Everything went well until I hit the Menu. I must confess that I then decided to pirate some code. Nothing made sense until I hit this page. Congratulations on a job well done!

    If I may, I would like to request your guidance. If you visit accesorioscelularpr, you will notice that the “Covers” menu drops behind my content. Any idea how I can overcome this? Thanks! :)

  36. Pingback: 60 Most Wanted WordPress Hacks | stylishwebdesigner

  37. Pingback: 40 WordPress Tips, Tricks, & Hacks | Create My Own Blog

  38. Pingback: 40 WordPress Tips, Tricks, & Hacks « Create A Blog Page

  39. Pingback: 40 WordPress Tips, Tricks, & Hacks « Create A Business Blog

  40. Pingback: 40 WordPress Tips, Tricks, & Hacks « how to create your own blog

  41. Pingback: 40 WordPress Tips, Tricks, & Hacks « How To Create A Blog Site For Free

  42. Pingback: 40 WordPress Tips, Tricks, & Hacks « How To Make A Blog Site

  43. Pingback: 40 WordPress Tips, Tricks, & Hacks « Create A Blog Site

  44. Pingback: 40 WordPress Tips, Tricks, & Hacks | bestbloghosting1

  45. Pingback: 40 WordPress Tips, Tricks, & Hacks | Make Your Blog

  46. Pingback: 60+ Awesome WordPress Tutorials » Themetation

  47. Pingback: 50个最强WordPress教程 « 臭皮匠

  48. Pingback: Most Wanted Wordpress Tricks and Hacks | Tricks Window

  49. Pingback: 50个最强WordPress教程 – 南三方博客–关注网站建设、网站优化、网站运营

  50. Pingback: 135 trang web/blog thủ thuật wordpress hay nhất | iTViệt.VN - itviet.vn - Cổng thông tin dành cho giới trẻ Việt Nam

  51. Pingback: 40+ Most Wanted WordPress Tricks and Hacks « yO.uR. underG.round bloggY.

  52. Pingback: Menampilkan Kategori secara Dropdown « ariezone95

  53. Pingback: 60+ Awesome WordPress Tutorials | Template Indonesia

  54. Pingback: Trucos, consejos y plugins para wordpress

  55. Pingback: Display wordpress category as tree structure | Open Source Rocks

  56. Pingback: How to Create Menu from Category and External Links on WordPress – Blogging Tips for WordPress, SEO and Traffic Site

  57. Pingback: See you on the top

  58. Pingback: 150 Most Wanted WordPress Tips, Tricks, and Hacks - DesignModo

  59. Pingback: 150 Most Wanted WordPress Tips, Tricks, and Hacks « DownGraf – Design weblog for designers

  60. Pingback: 150 Most Wanted WordPress Tips, Tricks, and Hacks for every Wordpress Blogger | | Sameer Manas

  61. Pingback: 35 WordPress Tips and Tricks that You Must Wants to know! |

  62. Pingback: 菜博 » 50个wordpress最强教程

  63. Pingback: 35 WordPress Tips and Tricks You Must Know | ThemesBank Blog

  64. Pingback: 40+ Most Wanted WordPress Tricks And Hacks | Templaget Get

  65. hi,

    please help me.
    how rename or add (dropdown menu) to style file.

    Difference : “.sf-menu AND #cat-nav- ”

    default file:

    .sf-menu li:hover ul, .sf-menu li.sfHover ul { top: 2.5em; z-index: 400; }
    ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul { top: -999em; z-index: 400; }
    ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { top: 0; }
    ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul { top: -999em; }
    ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul { top: 0; }

    .sf-menu { position: relative; margin: 0; padding: 0; list-style: none;clear:both; float: left; margin-top: 12px; padding-left: 9px; margin-bottom: 1em; background: url(‘images/menu_bg.png’) no-repeat; height: 58px; width: 957px; z-index: 400; }
    .sf-menu ul { position: absolute; top: -999em; margin-top: 20px; width: 212px; right: 7px; -moz-box-shadow: 3px 6px 8px 1px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 3px 6px 8px 1px rgba(0, 0, 0, 0.3); background-image: url(‘images/dropdown_top.png’); background-repeat: no-repeat; background-position: top; padding-top: 8px; z-index: 400; }
    .sf-menu a { display: block; position: relative; text-decoration:none; color: #fff; padding: 23px 20px 0px 20px; height: 30px; text-decoration: none; text-shadow: 1px 1px 1px #000; font-weight: normal; float :right; }
    .sf-menu li { float: right; position: relative; font-family: Tahoma; background: url(‘images/menu_line.png’) no-repeat; background-position: left 5px; }
    .sf-menu li ul li ul { right: 212px; margin-top: 0px;}
    .sf-menu li li { background: #ebebeb url(‘images/submenu_li.gif’) no-repeat; background-position: 24px 15px; height: 36px ; margin: 0px; float: right; width: 212px; z-index: 10; }
    .sf-menu li a:hover { color: #00b4ff; }
    .sf-menu li:hover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active { background: #121212; outline: 0; }
    .sf-menu > li.sfHover.sf-ul { background: transparent url(‘images/parent_link_left.png’) no-repeat; background-position: 7px 11px; z-index: 200; }
    .sf-menu li.sfHover li a:hover, .sf-menu li ul li.sfHover a, .sf-menu li ul li ul li.sfHover a { background: #f7f7f7 url(‘images/submenu_li_hover.gif’) no-repeat; background-position: 11px 0px; }
    .sf-menu li.sfHover li a, .sf-menu li.sfHover li ul li a, .sf-menu li.sfHover li ul li ul li a { background: url(‘images/submenu_li_hover.gif’) no-repeat ; background-position: -100px -100px; width: 172px; color: #404040; margin: 0px; padding: 14px 0px 0px 40px; text-shadow: 0px 1px 0px #cccccc; }
    .sf-menu > li.sfHover.sf-ul > a { color: #000; text-shadow: 1px 1px 1px #fff; background: transparent url(‘images/parent_link_right.png’) no-repeat; background-position: right 11px; z-index: 301; }
    ul.sf-menu li.backLava { position: absolute; z-index: 3; background: url(‘images/lavalamp.png’) no-repeat; background-position: center 0px; padding: 0; height: 16px; margin-top: 42px; }
    ——————–
    *
    *
    *
    *
    *
    *
    *
    *
    new code (DROPDOWN MENU):
    ————————————————————-

    #cat-nav { bottom:-14px; left:0; position:absolute; width:980px; z-index:100; }
    #cat-nav-left {background: url(images/n-2/cat-nav-left.png) no-repeat; width: 10px; height: 64px; float: left;}
    #cat-nav-content { background: url(images/n-2/cat-nav-content.png) repeat-x; float: left; height: 64px; width: 941px; }
    .nav li ul {box-shadow: 3px 6px 7px 1px rgba(0, 0, 0, 0.5); -moz-box-shadow:3px 6px 7px 1px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 3px 6px 7px 1px rgba(0, 0, 0, 0.5); background: url(images/n-2/cat_menu_bg.png) repeat-y; border: 1px solid #111010; -moz-border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius-topright: 0px; -webkit-border-top-left-radius: 0px; border-top: none; padding-bottom: 15px; }
    #cat-nav-content ul.nav { float: right; margin-top: 10px; margin-left:18px; }

    #cat-nav-content ul.nav li { padding:0 17px 0 0; }
    #cat-nav-content ul.nav li a { padding: 8px 4px 21px; }

    #cat-nav-content ul.nav li.sf-ul a { padding: 8px 6px 21px 15px; }

    #cat-nav-content ul.nav > li.sf-ul { background: url(images/n-2/li-hover.png) no-repeat 55px right; }
    #cat-nav-content ul.nav > li.sf-ul > a { background: url(images/n-2/a-hover.png) no-repeat 55px left; }

    #cat-nav-content ul.nav > li.sf-ul.sfHover { background: url(images/n-2/li-hover.png) no-repeat top right; }
    #cat-nav-content ul.nav > li.sf-ul.sfHover > a { background: url(images/n-2/a-hover.png) no-repeat top left; display: block; }

    #cat-nav-content ul.nav li li { padding: 0px; }
    #cat-nav-content ul.nav ul ul { border-top: 1px solid #111010; -moz-border-radius-topleft: 8px; -webkit-border-top-left-radius: 8px; }
    #cat-nav-content ul.nav li li a:hover { color: #00b7f3; }
    #cat-nav-content ul.nav li a {color: #fefefe; font-weight: bold; text-decoration: none; text-shadow: -1px -1px 1px #0a0a0a; text-align:right; }
    #cat-nav-content ul.nav ul li a { text-shadow: 1px 1px 1px #0a0a0a; }
    #cat-nav-content ul.nav > li > a:hover { }
    #cat-nav-content ul.nav li li {background: url(images/n-2/bullet.png) no-repeat 16px 21px; float:right; }
    #page-menu ul.nav li li { background:url(“images/n-2/page-menu-bullet.png”) no-repeat scroll 16px 16px transparent; }
    #page-menu ul.nav li a { padding: 8px 9px 16px; }
    #page-menu ul.nav > li > a.sf-with-ul:hover, #page-menu ul.nav > li.sfHover > a { background-color: #232323; }
    #page-menu ul.nav li li a { text-shadow: none; }

    #page-menu .nav li:hover ul, #page-menu ul.nav li.sfHover ul { left:0px; top:45px; }
    #page-menu .nav ul li:hover ul, #page-menu ul.nav ul li.sfHover ul { left:191px; top:-2px; }

    #cat-nav-content ul.nav li li a, #page-menu ul.nav li li a {background: url(images/n-2/n-2/divider.png) no-repeat bottom left; display: block; width: 156px; padding: 9px 5px 11px 28px !important; }
    #page-menu ul.nav li li a { background: none; padding: 0px 5px 0px 28px !important; }

    #cat-nav-right { background: url(images/n-2/n-2/cat-nav-right.png) no-repeat; width: 19px; height: 64px; float: left;}
    #cat-nav #search-form { float: left; width: 131px; background: url(images/n-2/n-2/search.png) no-repeat; height: 27px; margin-top: 15px;}
    #cat-nav #searchinput { background: none; border: none; font-style: none; color: #646464; padding-left: 12px; display: block; margin-top: 3px; float: left; width: 95px; }
    #cat-nav #searchsubmit { float:left; margin-top:7px; }

    #cat-nav #search-form img {float: right; margin-top: -24px; padding-right:10px;}

    #page-menu ul.nav ul { z-index: 10000; padding-bottom: 9px; background: #232323; border: 0px; padding-top: 2px; }
    #page-menu ul.nav ul ul { -moz-border-radius-topleft: 8px; -webkit-border-top-left-radius: 8px; }
    ————

    Tanks

  66. hi guys. my programming skills are very low. the mother of our programmer has been died and he is not able to work. i want to take help from you guys that kindly guide me that where to put these codes. kindly tell me the exact locations so that i get a drop down menu. i tried once but i get a horizontal categories under page but when i pass the mouse cursor on those categories sub categorizes don’t drop down. kindly help me.

  67. Pingback: 135 trang web/blog thá»§ thuật wordpress hay nhất « mockhangnoithat

  68. Pingback: 135 TRANG WEB/BLOG THỦ THUẬT WORDPRESS HAY NHẤT « Carton Boxes Packing (bao bì Carton)

  69. Pingback: 55 Best WordPress Tricks And Hacks | stylishwebdesigner

  70. I want to follow up and help you to know how, a good deal I liked acquiring your web blog today. I’d personally contemplate it a honor to run at my company and then utilize tips shared against your web site and also become involved in visitors’ remarks something like this. Should a position related to guest writer become to be had at your stop, i highly recommend you well then, i’ll know.

  71. Great post. I was checking constantly this blog and I’m impressed! Extremely useful information specifically the last part :) I care for such info a lot. I was looking for this certain info for a long time. Thank you and best of luck.

  72. Pingback: 150 Most Wanted WordPress Tips, Tricks, and Hacks | I Am Your Go2CreativeGuy

  73. Pingback: Ultimate Roundup of WordPress Screencasts and Tutorials | Tutorials | instantShift

  74. Pingback: 150 Most Wanted Wordpress Tips, Tricks and hacks

  75. Pingback: Traces Clothing » 150 Wordpress Tricks, Tips and Hacks

  76. Pingback: 135+ Ultimate Round-Up of Wordpress Tutorials | Tutorials | instantShift

  77. Pingback: Kill Your Time With Style » 40+ Most Wanted WordPress Tricks and Hacks

  78. Pingback: WordPress 开发者工具箱 | 机帆船

  79. Pingback: WordPress 技巧:制作一个显示指定类别的菜单 « WEB前规则

  80. Pingback: Display Categories In Horizontal Drop-Down Menu | | WordPress Place

  81. Pingback: WordPress 开发者资源 | 张自云(朋)的博客

  82. Pingback: Menampilkan Kategori secara Dropdown « Belajar Bersama Ovhan

  83. Pingback: Sedikit Link Belajar Wordpress | Rusydi Blog

  84. Pingback: WordPress 开发者工具箱 » IT资讯之家

  85. well, luckily i found your post, the first time i know this possible is when i was using a wp theme name “engamer”, i’m digging for it everywhere but in vain for i dont know the keyword to search. i should try immediately. thanks Aaron!

  86. Pingback: Top 50 WordPress Tutorials | Parvimania

  87. Pingback: Bangladesh Web Lab | Bangladeshi Web Designer and Developer Blogs – Top 50 WordPress Tutorial

  88. The javascript seems a bit convoluted, but it does work, which is most important, though I’ll still be on the look out for a more efficient solution.

  89. Pingback: Display Categories In Horizontal Drop-Down Menu | Wordpress New Tricks For Begginers

  90. Pingback: WordPress 开发者资源 – 我爱分享

  91. Pingback: 40 Wordpress Most Wanted Tips by ehackworld | Ehackworld

  92. Pingback: 50个最强WordPress教程 | 85后IT宅男

  93. Pingback: 30个优秀WORDPRESS技巧 | 85后IT宅男

  94. Pingback: 150 Most Wanted WordPress Tips, Tricks, and Hacks for every Wordpress Blogger - TechnoGrate - TechnoGrate

  95. Pingback: 50 مرجع آموزش Ùˆ استفاده از وردپرس « بنیت

  96. Pingback: WordPress Developers Toolbox « Tybee Guy

  97. Pingback: WordPress Hacks to Style Out Your Blog Theme « CSS Tips

  98. Pingback: WordPress ????? | ???

  99. Pingback: 40+ Most Wanted Wordpress Tricks and Hacks | Wordpress Automatic

  100. Pingback: 20+ Most Wanted WordPress Tricks and Hacks | eolthing.com

  101. ok i changed themes and figured out how to add the menu, but i can’t get it to be a dropdown menu. Also, how can i add both pages and categories to the same menu?> I apologize in advance if I sound lost with all of this….because i am :)

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>