Displaying WordPress categories in a horizontal dropdown menu.

Posted on January 16, 2008 by aaron

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.

To activate it, change your theme’s <body> tag to <body onload=”mbSet(‘menu’);>
It was not written by me, but I’ve been using it for a long time and don’t remember where I got it.
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.”

Pingback: 40+ Most Wanted Wordpress Tricks and Hacks | Tut7
Pingback: 33 Specific to WordPress Category Hacks And Useful Resources
Pingback: 40 Most Wanted Wordpress Tricks and Hacks | blog
Pingback: 35 WordPress Tips and Tricks You Must Know | SmashingHub
Pingback: 40 WordPress Tips, Tricks, & Hacks | Ultimate Free Website
Pingback: 60+ Awesome WordPress Tutorials | The Best WP Themes Online
Pingback: YESUREæŠ€æœ¯åšå®¢ » 40ä¸ªæœ€å€¼å¾—åº”ç”¨çš„WordPressæŠ€å·§å’Œå·¥å…·
Pingback: 40+ Most Wanted Wordpress Tricks and Hacks | AddaZ ...::: Share Latest Things :::...
Pingback: 136 Massive Wordpress Tutorial Collection | WebCoreStudio
Pingback: 40ä¸ªæœ€å€¼å¾—åº”ç”¨çš„WordPressæŠ€å·§å’Œå·¥å…· - è¡Œäº‘æµæ°´
Pingback: WP Hacks | [sk]
Pingback: VietNamTips » 36 WordPress Tips, Tricks
Pingback: 40+ Most Wanted WordPress Tricks and Hacks | WordPress Identity
Pingback: MEGAPOST: 1001 trucos, consejos y plugins para wordpress | TAito PersonalÂ´s BLog
Pingback: Top Collection Of WordPress Tutorials On The Web | Nerdy Geeks Blogging Guide
Pingback: 40+ Most Wanted Wordpress Tricks And Hacks « Quadrated
Pingback: 100+ Awesome Resource list for Wordpress | WebSenseLogic
andyrio on September 2, 2010 at 8:30 am said:

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

Reply ↓
Pingback: 40å¤šä¸ªæœ€å—æ¬¢è¿Žçš„WordpressæŠ€å·§ | WordPressä¸æ–‡åœˆ
Pingback: 40å¤šä¸ªæœ€å—æ¬¢è¿Žçš„WordPressæŠ€å·§ | ImJoYo, Im â¤"¢ç»ˆäºŽÂ°
Pingback: zhq » Archive » 50ä¸ªæœ€å¼ºWordPressæ•™ç¨‹
Pingback: » 50ä¸ªæœ€å¼ºWordPressæ•™ç¨‹ @ Cloud 1989
Pingback: Wordpress: 40 Trucos y Consejos para | Proyecto Aurora
Team Roster on October 30, 2010 at 5:48 am said:

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.

Reply ↓
Pingback: 50ä¸ªæœ€å¼ºWordPressæ•™ç¨‹ | Cloud 1989
Adib on November 2, 2010 at 11:39 am said:

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.

Reply ↓
Baby Tunes on November 15, 2010 at 7:52 pm said:

Thanks just what I was looking for.

Reply ↓
Pingback: WordPress å¼€å‘è€…èµ„æº « WordPress
Pingback: 135 link cung cáº¥p thá»§ thuáºt wordpress hot nháº¥t | Táº¡p ChÃ SEO
Philippines Virtual Assistant on December 11, 2010 at 11:41 pm said:

Great tutorial … Very easy to follow … Good Job … Thanks — Kathleen

Reply ↓
Pingback: 135 webs/blog for wordpress tips |
Pingback: Marsha.web.id » Menampilkan Kategori secara Dropdown
Pingback: 135 trang web/blog thá»§ thuáºt wordpress hay nháº¥t | Ninh BÃ¬nh 24h
Pingback: ç²¾åŽåˆ†äº«ç½‘-åˆ†äº«äº’è”ç½‘ » 50ä¸ªæœ€å¼ºå›½å¤–WordPressæ•™ç¨‹
Pingback: WordPress å¼€å‘è€…èµ„æº | æ˜¥æš–èŠ±å¼€
Pingback: wordpressæ•™ç¨‹ » æœ€å®žç”¨30ä¸ªWordpressæŠ€å·§
du hoc my on February 4, 2011 at 4:57 am said:

Dear,

I followed the exactly as your tutorials but I could not get it work.

Please kindly advise me.

Thanks

Reply ↓
cangrejero on February 13, 2011 at 1:13 pm said:

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!

Reply ↓
- cangrejero on February 13, 2011 at 2:06 pm said:
  
  Solved my problem by using z-index. Thanks, anyway!
  
  Reply ↓
cangrejero on February 13, 2011 at 9:23 pm said:

A funny thing is happening with the menu created following this tutorial and the installation of the widget vertical-scroll-image-slideshow-gallery. When the widget is installed in the sidebar, the child menus do not work. Remove it and the child menus work as advertised. Any ideas? Thanks!

Reply ↓
Pingback: 60 Most Wanted WordPress Hacks | stylishwebdesigner
lucky_girl on February 18, 2011 at 1:27 am said:

Great post. You seem to have a good understanding that how to create a professional drop down menu. When I entering your blog, I felt this. I’m also interested in it!

Reply ↓
Pingback: 40 WordPress Tips, Tricks, & Hacks | Create My Own Blog
Pingback: 40 WordPress Tips, Tricks, & Hacks « Create A Blog Page
Pingback: 40 WordPress Tips, Tricks, & Hacks « Create A Business Blog
Pingback: 40 WordPress Tips, Tricks, & Hacks « how to create your own blog
Pingback: 40 WordPress Tips, Tricks, & Hacks « How To Create A Blog Site For Free
Pingback: 40 WordPress Tips, Tricks, & Hacks « How To Make A Blog Site
Pingback: 40 WordPress Tips, Tricks, & Hacks « Create A Blog Site
Pingback: 40 WordPress Tips, Tricks, & Hacks | bestbloghosting1
Pingback: 40 WordPress Tips, Tricks, & Hacks | Make Your Blog
Pingback: 60+ Awesome WordPress Tutorials Â» Themetation
Pingback: 50ä¸ªæœ€å¼ºWordPressæ•™ç¨‹ « è‡çš®åŒ
Pingback: Most Wanted Wordpress Tricks and Hacks | Tricks Window
Pingback: 50ä¸ªæœ€å¼ºWordPressæ•™ç¨‹ – å—ä¸‰æ–¹åšå®¢–å…³æ³¨ç½‘ç«™å»ºè®¾ã€ç½‘ç«™ä¼˜åŒ–ã€ç½‘ç«™è¿è¥
Best New Jersey Wedding Photographers on March 2, 2011 at 8:19 pm said:

We’re a group of volunteers and starting a new scheme in our community. Your web site provided us with valuable information to work on. You’ve done an impressive job and our whole community will be thankful to you.

Reply ↓
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
Pingback: 40+ Most Wanted WordPress Tricks and Hacks « yO.uR. underG.round bloggY.
Pingback: Menampilkan Kategori secara Dropdown « ariezone95
Pingback: 60+ Awesome WordPress Tutorials | Template Indonesia
Pingback: Trucos, consejos y plugins para wordpress
Pingback: Display wordpress category as tree structure | Open Source Rocks
Computer Guide on May 22, 2011 at 8:15 am said:

Excellent tips. Through this comment I just wanted to thank you for your tips. I’ve just implemented how to create menu from category on my blog at Linux Guide and Blog Tips for Beginners. I applied your tips are very easy and no problems. Thanks again.

Reply ↓
Pingback: How to Create Menu from Category and External Links on WordPress – Blogging Tips for WordPress, SEO and Traffic Site
Pingback: See you on the top
Pingback: 150 Most Wanted WordPress Tips, Tricks, and Hacks - DesignModo
Pingback: 150 Most Wanted WordPress Tips, Tricks, and Hacks « DownGraf – Design weblog for designers
Pingback: 150 Most Wanted WordPress Tips, Tricks, and Hacks for every Wordpress Blogger | | Sameer Manas
Pingback: 35 WordPress Tips and Tricks that You Must Wants to know! |
Pingback: èœåš » 50ä¸ªwordpressæœ€å¼ºæ•™ç¨‹
Pingback: 35 WordPress Tips and Tricks You Must Know | ThemesBank Blog
Pingback: 40+ Most Wanted WordPress Tricks And Hacks | Templaget Get
araz on July 1, 2011 at 4:28 am said:

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

Reply ↓
birthday glitter pictures on July 4, 2011 at 7:47 pm said:

Fantastic profession baby boomer. I enjoy it again. may very well comparable much too, investigate your online site, i just primed a short review with my online site.

Reply ↓
mark on July 11, 2011 at 1:51 am said:

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.

Reply ↓
Pingback: 135 trang web/blog thá»§ thuáºt wordpress hay nháº¥t « mockhangnoithat
Pingback: 135 TRANG WEB/BLOG THá»¦ THUáº¬T WORDPRESS HAY NHáº¤T « Carton Boxes Packing (bao bÃ¬ Carton)
Pingback: 55 Best WordPress Tricks And Hacks | stylishwebdesigner
hotellebeach on August 10, 2011 at 2:57 am said:

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.

Reply ↓
Warrior Macros on August 23, 2011 at 4:37 am said:

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.

Reply ↓
Pingback: 150 Most Wanted WordPress Tips, Tricks, and Hacks | I Am Your Go2CreativeGuy
Pingback: Ultimate Roundup of WordPress Screencasts and Tutorials | Tutorials | instantShift
Pingback: 150 Most Wanted Wordpress Tips, Tricks and hacks
Pingback: Traces Clothing » 150 Wordpress Tricks, Tips and Hacks
Pingback: 135+ Ultimate Round-Up of Wordpress Tutorials | Tutorials | instantShift
Pingback: Kill Your Time With Style » 40+ Most Wanted WordPress Tricks and Hacks
cooking games for girls on October 6, 2011 at 12:53 am said:

Love the site but I don`t see where to receive to your newsletter.

Reply ↓
Pingback: WordPress å¼€å‘è€…å·¥å…·ç®± | æœºå¸†èˆ¹
Pingback: WordPress æŠ€å·§ï¼šåˆ¶ä½œä¸€ä¸ªæ˜¾ç¤ºæŒ‡å®šç±»åˆ«çš„èœå• « WEBå‰è§„åˆ™
Pingback: Display Categories In Horizontal Drop-Down Menu | | WordPress Place
Pingback: WordPress å¼€å‘è€…èµ„æº | å¼ è‡ªäº‘(æœ‹)çš„åšå®¢
Pingback: Menampilkan Kategori secara Dropdown « Belajar Bersama Ovhan
Pingback: Sedikit Link Belajar Wordpress | Rusydi Blog
Pingback: WordPress å¼€å‘è€…å·¥å…·ç®± » ITèµ„è®¯ä¹‹å®¶
Melroy on November 28, 2011 at 6:14 am said:

i liked it and you can see on : http://digitalmarketingstep.com/ i have taken the same steps

Reply ↓
y8 on December 9, 2011 at 2:15 am said:

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!

Reply ↓
Pingback: Top 50 WordPress Tutorials | Parvimania
Pingback: Bangladesh Web Lab | Bangladeshi Web Designer and Developer Blogs – Top 50 WordPress Tutorial
Jack on January 1, 2012 at 10:02 am said:

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.

Reply ↓
Joseph Buarao on January 15, 2012 at 6:51 am said:

first of all I would like to thanks for this very informative tutorial.. is this working good in ie6? and can i use the code into my premium theme?

Reply ↓
Joseph Buarao on January 15, 2012 at 6:51 am said:

first of all I would like to thanks for this very informative tutorial.. is this working good in ie6? and can i use the code into my premium theme?

Reply ↓
Pingback: Display Categories In Horizontal Drop-Down Menu | Wordpress New Tricks For Begginers
Pingback: WordPress å¼€å‘è€…èµ„æº – æˆ‘çˆ±åˆ†äº«
Pingback: 40 Wordpress Most Wanted Tips by ehackworld | Ehackworld
Pingback: 50ä¸ªæœ€å¼ºWordPressæ•™ç¨‹ | 85åŽITå®…ç”·
Pingback: 30ä¸ªä¼˜ç§€WORDPRESSæŠ€å·§ | 85åŽITå®…ç”·
Pingback: 150 Most Wanted WordPress Tips, Tricks, and Hacks for every Wordpress Blogger - TechnoGrate - TechnoGrate
Pingback: 50 Ù…Ø±Ø¬Ø¹ Ø¢Ù…ÙˆØ²Ø´ Ùˆ Ø§Ø³ØªÙØ§Ø¯Ù‡ Ø§Ø² ÙˆØ±Ø¯Ù¾Ø±Ø³ « Ø¨Ù†ÛŒØª
Pingback: WordPress Developers Toolbox « Tybee Guy
Pingback: WordPress Hacks to Style Out Your Blog Theme « CSS Tips
Pingback: WordPress ????? | ???
Pingback: 40+ Most Wanted Wordpress Tricks and Hacks | Wordpress Automatic
Pingback: 20+ Most Wanted WordPress Tricks and Hacks | eolthing.com
Aaron on February 8, 2008 at 12:28 am said:

You’re welcome.

Reply ↓
Sarah on April 14, 2008 at 10:56 am said:

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

Reply ↓

Anthology of Ideas

Displaying WordPress categories in a horizontal dropdown menu.

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

Leave a Reply Cancel reply