WordPress: “Magazine style” Horizontal dropdown menu

Even if most blogs have a very simple navigation, Worpress allows you to create very advanced menus. In this tutorial, I'll show you how to create a "Magazine Style" horizontal drop-down menu, for your categories or even your pages.

Wordpress: Menu de catégories horizontal

The php

The first thing we have to do is to use php to get or pages and subpages (or our categories/sub-categories). Paste the following code in the header.php file of your theme.

<ul id="nav2" class="clearfloat">
	<li><a href="<?php echo get_option('home'); ?>/" class="on">Home</a></li>
 	<?php wp_list_categories('orderby=name&exlude=181&title_li=');
 	$this_category = get_category($cat);  
 	if (get_category_children($this_category->cat_ID) != "") {  
 		echo "<ul>";  
 		echo "</ul>";  


As usual, the CSS will control the look and feel of html elements, but it will also allows us to display only the sub-categories of the selected category. No Javascript is needed in this exemple, excepted if you want to ensure backward compatibility with Internet Explorer 6.

        background-color: #202020;
        display: block;

#nav2, #nav2 ul {
	line-height: 1;
	list-style: none;

#nav2 a ,#nav2 a:hover{
	display: block;
	text-decoration: none;

#nav2 li {
	float: left;

#nav2 a,#nav2 a:visited {
	padding:6px 12px;

#nav2 a:hover, #nav2 a:active {

#nav2 li ul {
	border-bottom: 1px solid #a9a9a9;
	height: auto;
	left: -999em;
	position: absolute;	
	width: 900px;

#nav2 li li {
	width: auto;

#nav2 li li a,#nav2 li li a:visited {

#nav2 li li a:hover,#nav2 li li a:active {

#nav2 li:hover ul, #nav2 li li:hover ul, #nav2 li li li:hover ul, #nav2 li.sfhover ul, #nav2 li li.sfhover ul, #nav2 li li li.sfhover ul {
	left: 30px;

Once you added the lines above to your stylesheet, you’ll have a modern, accessible and xhtml/css valid fancy menu. If you want to ensure backward compatibility with IE6, you’ll have to add this bit of Javascript:


sfHover = function() {
	var sfEls = document.getElementById("nav2").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
if (window.attachEvent) window.attachEvent("onload", sfHover);


Paste this script into an external file, or in the head section of your index.php file. Once done, your blog now have a fancy dropdown horitontal menu!

  • great!…

  • jbj

    Thanks =)

  • Pingback: Web 2.0 Announcer()

  • michi

    No example?? I really really HATE webcode websites without example 🙁

  • jbj

    I’m agree with you that code exemples are good and usefull. Though, I can’t set up a whole wordpress install each time I wrote a WP tutorial, this is why I put the screenshot.

  • Very thx!!!!

  • Mark

    Awesome Tut. I like the fact that there is no example. It makes me try it myself instead of copy and paste so I can learn. Great Job.

    This is really useful !

    If I get some time, I will make it and send you an example to post.

  • jbj

    Thank you, Mark! That will be great if you can provide an exemple 🙂

  • Pingback: Leonaut.com()

  • Will Knot B. Revealed Snr.

    Thanks jbj. It’s a nice site you have here 🙂

  • This is a great tute. But i run into a wrinkle. When i drop it into the theme i am building, the navigation menu only displays the categories. Whereas i want it to display the pages/sub pages. The tutorial intro says that is what it is supposed to be doing, but it fails for me : (

    BTW – i do infact have pages/sub pages built in the WP DB.

    What do i have to do to make it switch?

    • Roger


      I was trying to get the Menu from this artice to display PAGES as opposed to Categories like yourself, but havn’t yet figured it out yet, and was wondering if you had??

      Help please! TIA…

  • Nice tut !

    But I think we can use only one function: wp_list_categories() to do that. When WordPress generates xhtml for categories code, it has two classes called current-cat-parent and current-cat which you can define in your CSS to highlight the active category.

    So that they can remember exactly where you are and where you came from!

    You can see my category & page drop-down menus at my theme demo: WP-MagaNews.

    • tom I am starting to put together my site and I am so new at this I am still using my pacifier. I checked your theme demo at WP-MagaNews and You are using the exact kind of drop down menu I am looking for but have not found. I get confused when everyone start saying copy this into this menu and past this into this css etc. its hard for me to keep up. I have different pages with multiple sub categories and sub sub categories. I want to be able to click on a tab and the sub categories drop down to a horizontal menu that is permanent or fixed once you select the tab and then from there work on sub subs. I hope I make since cause I dont to me. Anyway you have what I am looking for. Is there a simple way to install it or find it somewhere to install it? Is there a way you may be able to explain it to me in dummy terms. Thank you in advance.

      • Roger

        Did you find a solution to make the menus permanent on selection?

  • Tom, that menu looks great! I am wondering where (or IF) i can grab that theme to dissect it and figure out how you built that, as it is nearly exactly what i need!

    I should also mention that on FF 3.0 on my mac the sidebar gets kicked down below the main content DIV. You may have some padding issues there.


  • jbj

    @Nick: I’m at my office now, I’ll answer you tonight 🙂

  • Thanks jbj, much appreciated!

  • @Nick: I’m going to sell my theme in next some days. So you can wait and purchase it to do what you like. I think that menu code is really smart.

    Unfortunately, I don’t have Mac to test the theme, I just tested it on Windows on FF,IE and Opera. If you know how to fix the bugs, please tell me at here.

    Thanks so much !

  • Tom, i could totally help you trouble shoot, but in order to do that, you need to let me see the code.

  • jbj

    @Nick: Basically, you just have to replace wp_list_categories() by wp_list_pages(‘title_li=’);, this will list your pages/subpages 🙂

  • JBJ – That pretty much got me there. But now i have a slight problem with the CSS.

    You see the theme i am building has content centered in the middle of the browser window, just like this site, and the sub-pages seem to be positioning themselves relative to the edge of the broswer window, and not to the edge of the div tag they are in?!?

    Does this sound familiar?


  • jbj

    Do you have the page online? If yes, I’ll check it 🙂

  • JBJ – the page is being built locally, so there is no online version at the moment. But at this rate, i can put one online so that you can investigate.

    Is there a live online example i could inspect to see how that is built.

    I have also noticed that the problem is essentially this:

    the sub-pages show up in the navigation at an absolute position of so many pixels left of the browser edge

    #nav2 li:hover ul, #nav2 li li:hover ul, #nav2 li li li:hover ul, #nav2 li.sfhover ul, #nav2 li li.sfhover ul, #nav2 li li li.sfhover ul {
    left: 30px;

    and then so many pixels under the top of the browser.

    So that when the browser scrolls either side to side, or up and down, the sub-pages show up in the same browser relative position, rather than relative to main nav row.


  • jbj

    I had similar problems with another menu: Most of the time it appears on internet explorer.
    The absolute position can also be a bit of pain, because it can fit good on a website and not in anotehr one.
    Try to test diffrent values for the position:absolute, I’m pretty sure that the problem comes from here.
    And if you have the chance to upload your work on a server, I’ll be able to give you a quick fix.

  • Hey there JBJ,

    I finally have a live version of the site online.


    I have tried playing with the “position” values, and that only seems to break the navigation bar completely. I am at a loss, i would love to have this working, as it is the perfect solution for this particular site. Any help would be awesome on this one!

    Thanks again.

  • Great tutorial! I was looking to do something like this for a potential client after discussions with him. I found a way to do a hover menu containing child pages, but this here is exactly what I was looking for. Thanks a lot!

  • jbj

    @Nick: I have just checked your site, the problem will be easy to fix, I guess. I’m a bit tired now so I’ll fix it tomorrow morning 🙂

    @ThinkSoJoe: Glad you liked it!

  • jbj

    @Nick, problem solved. Add margin-left:-95px; to #nav2 li ul in style.css, and you’re done!

  • Oh yes, beautiful. I was hunting for this horizontal drop down. Thanks.

  • @ JBJ – i am afraid that didn’t do it.

    To see what i mean as being the problem; first mouse over any of the main nav items, take note of where the secondary items appear. Then resize the browser a bit, or scroll down and mouse over a main nav item again. See how the secondary nav item appears in a different place relative to site content, but the same position relative to the browser top left corner?

    Is this perhaps something to do with how it is nested in the DIV tags i have built?

    Sorry to be such a pain.

  • jbj

    @Nick: For what I saw, you should put the nav in your div#header. And add position:relative; to the header in your css file.
    Because we’re using an absolute positioning for the nav, the parent element must have a position (relative or absolute) or the current problem appears.

    I hope this will solve your problem!

  • my evil twin

    it’s not working on ie7….

    at least not on my test site and not on nick’s demo site.

  • my evil twin


    oh, sorry for double-comment, but you can even put position:relative to the #nav2-element, because it’s the #nav2 ul’s parent element, so it will align properly (no need to change the header markup).

    bye bye 🙂

  • jbj

    You’re probably right, I don’t have IE so I didn’t tested that code with that shitty browser…
    Good tip for the position:relative on the #nav2 element! Sorry for that mistake!

  • Well i have added

    #nav2 li ul {position:relative;}


    #nav2 {position:relative;}

    and it appears to be even more broken.


    what can i try now?

  • my evil twin

    Don’t mix things up.

    #nav2 needs to have position:relative, but #nav2 li ul needs to have position:absolute.

    take a look at the position-tag, then you’ll see what difference it makes.

    you tell #nav2 li ul that it’s absolute position referes to the next parent element with position:relative set.
    if none specified, it referes to the body tag, which makes your fold out align to it.

    we want it to align to the navigation, so you set the tag at it’s direct parent, which is #nav2…

    sorry for my bad english, it’s not my mother tongue 😀

  • my evil twin

    PS: do you have “firebug” (firefox extension) installed?

    it’s a great tool for web development. i just did the changes i mentioned before at you’re site and the menu is working just fine then…

    today, i’ll check what changes have to be made to get it working with ie7 🙂

  • Pingback: When To Use Magazine-Style Themes For Blogs? | How-To | Smashing Magazine()

  • Thats really cool, I have done a drop down menu myself before but I never thought of this method. Mostly because my way was 5 lines of Jquery =P.

  • Pingback: When To Use Magazine-Style Themes For Blogs? | "IT" - I LIKE "IT" !()

  • Pingback: Top 5 WordPress Navigation Menu Tutorials()

  • Pingback: When To Use Magazine-Style Themes For Blogs? | aboutCREATION()

  • smart…
    thank’s i already try this code and working.. 🙂

  • fantastic! I’ve got a magazine style site I’m building for a client and this will be a great menu feature to implement! thanks 🙂

  • Pingback: 5个Wordpress导航菜单教程 | 帕兰映像()

  • Thanks very much for the code, I appreciate it

  • Hi, one problem i’m having is that when i click on a category link in the dynamic menu, the dynamic menu on that category page has all top level categories as well as the sub categories for the category that was clicked – in the top level links. So if i have top-level categories A B C and under B, I have subcategories X Y Z, when I click on B, the top level links are A B C X Y Z.

    And it only happens in firefox, not IE7 . I’m going to take it down in the mean time, but if you need me to demonstrate it, I can reintroduce the menu code.

    thanks & regards

  • jbj

    @Hwy5: It will be nice if you can put a demo of your problem online, so I should be able to check it out 🙂

  • @ my evil twin

    I have made the changes you suggest, and it only seems to mega-break the navigation. What i have posted now:


    is with the CSS changes you suggested. #nav2 being ‘position:relative’ seems to upset things greatly. Any thoughts?

  • @ my evil twin

    forgot to mention, i do have firebug, it is a GREAT tool.

  • Pingback: When To Use Magazine-Style Themes For Blogs? | [w3b]ndesign()

  • @ everyone

    for those of you who still care :

    I seem to have figured it out, thanks so much for all your help and guidance!


  • Hi, implemented this for my blog for display pages and subpages. However can anyone help with this:

    1 – Adding a default #background for the currently active page.

    2 – When on the page with subpages, let the subpage menu appear without need to hover over the page menu.

    Thanks in advance.

  • jbj

    @Neowster: Can you give us a link to your code please? It will be easier to find where the problem is!

  • @ jbj

    Thanks for your reply. Perhaps I didn’t make myself clear. I used your code and replaced the wp_list_categories by wp_list_pages as you mentioned earlier in the post to display my pages and subpages and everything worked fine.

    What I would like to check is how can I add a class to identify the current page so that the “active” page has a different background and standout.

    Another problem I faced is when at the page with subpages, the list of subpages appear only on hover of the cursor over the page parent. Is it possible to make the subpages persistent when the user is at any page or subpages?

    A perfect example is over here. I tried this solution but faced some unsolved issues.

    Basically I am being greedy by asking for the best of both world. A two tier nav with subpages appearing on hover, and persistent when on the pages with subpage.

    I have no idea whether it can be done, but if it does, it will be the last horizontal nav I ever need.

    A million thanks and appreciation regardless of the outcome.

  • jbj

    @Neowster: I understand what you’re looking for. Even if this tutorial can be a great base, it’s very different than what you want for your blog. I’ll think about it for a future article, that’s a great idea 🙂

    For highlighting the current page, you should definitely read this page.

    Good luck!

  • Pingback: New Look – Statement | Neowster()

  • Pingback: bloggusto.com » Blog Archive » Add Code For Horizontal Menu()

  • Taeke

    @ Neowster: Any luck yet? I’m looking for exactly the same solution

  • @Taeke,

    Unfortunately, I am still in search for the perfect nav menu. Will share if I ever come upon such a solution.

  • Pingback: Top 5 WordPress Navigation Menu Tutorials | How To WordPress()

  • Wow this tutorial helped me to design my own menu. Cool thanks

  • Esben

    First off, thanks jbj for a great tut!

    Second; i’m building a site, and i really need it to work in IE so i was wondering if anyone found a solution that has made it work?

    The site im building: http://www.digitaludskrab.eu/vsh

    Thanks all,

  • jbj

    @Esben: Thanks for your compliments! I don’t use Windows and IE, so I can’t help a lot. Do you use the javascript code needed for getting the menu to work on IE?

  • Esben

    Hi jbj,

    thanks for a very quick reply. I am currently trying to make it work saving the code to ie_script.js file and using include ‘ie_script.js’ in my index.php og header.php. This is what is meant when you write i should paste the code to an external file, right?

    Also, there should be no difference between IE 6 and IE 7 on this account, right?

    I’ve tried various things, but so far no luck.

    Sorry if these are noob questions, im kinda new to this. And thanks for your help so far.

  • Esben

    Hi again,

    i opted to try other stuff since i couldnt make it work due to damn IE. This menu is nicer though so might try it again later. Thanks again for code and reply

  • cris

    when i HOVER a parent item and click on child item that appears everithing is fine and works perfectly. but when i CLICK on parent menu item which has got child items, then those child items appear on same row as parent items – they change into parent.

  • wppowered

    @ cris

    If you delete this piece of code

    $this_category = get_category($cat);

    that issue will go away 😉

  • Pingback: WPTUT - Wordpress Tutorials()

  • Is it possible to adapt/modify this code to produce a horizontal menu system similar to that used on Joomla Panel (http://joomlapanel.com/) where the submenu stays shown and not just when you hover over the parent, plus after you have finished hovering over the other parent items, the submenu returns to the active submenu.


  • hi JBJ,

    I applied this method on my website, except that there is a problem 🙁

    When I click on a category which has several subcategories (eg News), the subcategories are displayed in the following categories.

    Any idea ?

    Thank you;)

  • Brian

    Hey Rainbow,

    I followed the advice given by ‘wppowered’ and my problem went away. I looked at your site and I think you have the same problem I had.

    Good luck.

    Thanks for an excellent tutorial and everyone’s help and advice.

  • sorry,
    i find the answer in the comments 😉

  • Yes,
    thank you so much Brian,
    I receive your mail via G&T and the problem is now solved !

  • Great tutorial, fits in well with almost any theme if you cater for the additional buttons. Thanks for sharing.

  • Pingback: » 35 super useful wordpress plugins that you may ever need()

  • Removing $this_category = get_category($cat); made a big difference for me when browsing subcategories. What’s the purpose of having this line at all? Does it enable any other functionality?

    If I leave it in, and try to browse subcategories, the subcategories are listed with the categories on the menu. Removing that line fixes it all.

  • Great tutorial. It gives me additional space to place links on my navigation bar with the dropdown menu.

  • Pingback: Complete Wordpress Theme Tutorial « Kolmex()

  • Camilo

    Thanks a lot for this! It’s great! I can use it in several sites and it doesn’t seems to break, 😀

  • Pingback: 20 WordPress Tricks to Improve Your Blog()

  • Pingback: 20个诀窍帮你提升wordpress博客动力 â—‡ Yustar’s Blog()

  • Pingback: 20 tips för att förbättra er blogg! | ZtrixQ.se()

  • Pingback: 20 Trucchi Per Migliorare Wordpress()

  • ROB


    Think this is great and very easy to implement in wordpress.

    My only issues are when i created a sub menu for the drop down the home button appears How can i remove the home link? drop is under progarms.

    AlSo how can the menu be centred so it looks symetric in my top header.

    This is my site: http://www.robsteele.co.uk/worddemo_site/wordpress/

    thx and its cool!


  • ROB

    Hi me again!!

    sorry i have sorted the home button problem but i have now got a problem with my navigation in i.e.
    In firefox it is fine, but in internet explorer it wraps over to the next line. Not sure is this a problem with fixed width boxs in ie.

    Any help very much appreciated

    link is:

  • cherie

    I am having a problem with the navigation.

    when a user chooses an option with child categories, the child categories appear large and in the navigation when the option is clicked. Example, I have the category ABOUT. It has 6 child categories.

    If you roll over ABOUT the child categories all show as intended and can be clicked. They take you to the correct page. BUT, if you CLICK on ABOUT, the child categories all show up in the menu in the same size as the rest of the items. Though if you roll over ABOUT, the smaller versions will show.

    Testing site: http://handmadecatskills.com/tuthilltown/

    Thoughts? I have the problem on both the unaltered css from above and the altered css that is showing on the site right now.

    thanks for any help.

  • Hi, I would really appreciate your help so I can fix few things on the website I am just building.

    1. how to change the black color and the color of the letters
    2. how to put the text of the titles in the middle
    3. the dropdown titles of the categories don’t appear on mouse over.

    Sorry for my English, I hope it is understandable enough.


  • Pingback: 20 WordPress Tricks to Improve Your Blog | brainstorming magazine | use the brain to get ideas()

  • Pingback: » 5个Wordpress导航菜单教程 | 零食屋()

  • Theo

    I’m trying to get this working but it says I have an error: Warning: Missing argument 2 for get_page_children(),:

    34 page_ID) != “”) {
    37 echo “”;
    38 wp_list_pages(‘title_li=&use_desc_for_title=1&child_of=’.$this_page->page_ID);
    39 echo “”;
    40 }
    41 ?>

    Can anyone help?

  • Awesome it worked for me.

  • Excellent, worked for me. I been looking all over the place for about an hour now. thanks.

  • Hi worked awesome,

    But how do i display the dropdown vertical, also if i want to display blogroll categories??

  • Pingback: Wordpress: Tutorials and Resources for Designers and Developers()

  • Pingback: On the Hunt for compatible wp plugins()

  • About some vertical menu …….? I want to have my categories in a vertical menu … can you pls help me? Thank you in advance!

  • Pingback: بیش از 50 مرجع برای یادگیری Ùˆ استفاده بهتر از وردپرس - .:::پـــی ســی آریـــØ()

  • Joe

    Most of this worked well for me (thanks for the code!). My issue is that when I rollover the parent, the children display, but there is a gap between the parent and child level such that my cursor cannot make it down to the child level before the children disappear.

    Also, I am displaying bullets despite the fact that i see the list style as none.

    Any ideas?

  • Pingback: Top 5 Tutoriais Menú de Navegación para WordPress | Ajuda Wordpress em Português()

  • Great tutorial! Was very helpful

  • Wow! Thanks. This is a great horizontal menu. I’ve always have had an issue with horizontal menus. Thanks.

  • Pingback: How to Display Your Content on a Blog’s Front Page | Webdesigner Depot()

  • Pingback: Tips menampilkan kontent dalam frontpage blog yang efektif « Webdesigner Resources()

  • Pingback: How to make a magazin style wordpress dropdown menu? | WpFunc()

  • Jenjen

    Very nice! Thanks!

  • Not sure if this has been mentioned yet, but thought I’d put it out there: the php code in wp_list_pages shows “exlude” which prob should be “exclude”?? (sorry, should have been an editor in another life)

    🙂 Awesome, can’t wait to implement!

  • I can get the first level of the menu to display my post categories.

    No children of these categories show on the 2nd level though.

    If the category i select has children it displays the text “no categories” to the right of the level 1 menu.

    Any Ideas?

  • If I want the menu to be Pages/Subpages instead of Categories/SubCategories what is the code for it?

  • Hum…no sample? People are too lazy to look at the code and figure out what it does. It would be nice to have a little sample.

  • Andrew

    Seems to have some IE problems, I couldn’t actually get this to work properly in Firefox either. I had an open div for my navigation and I placed the coding, everything seemed fine except when you click on a category that had child categories they would appear with the rest of the navigation, I tried using CSS to position them under the main category but that made them dissapear in IE. I’m dissapointed but this seemed like a good navigation and I thank you for the code nonetheless..

  • Hi, Fist I’d like to congratulate you for the great, but very great post, I was looking loads sites and videos and the only exactly info. was yours.;-)
    I can’t not understand where I need to replace the css code: Edit theme>editor>?

    Again on the header.php or on the stylesheet.css?

    have a look please on my web page (www.clownjeca.com), and on the header u will seee and know what I’m doing wrong.

    Thank’s a lot for your help and great site.

  • that doesn’t work at all in 3.0 … 🙁

  • Thanks a lot, worked great for me, although I had to spend some time on it.

  • And when under the category does not show the menu, only subcategories?

    Sorry for bad English, I am a Ukrainian:)

  • Roger


    First off, this is some fabulous work! I thank you very much..

    I am trying to modify this code in order to get the relevant sub-menu to be permanently displayed when the user selects either the parent or the child for that section. Any ideas on how to do this? Any help would be very much appreciated!


  • It doesn’t work on wp 3.0
    I made all like in this tut, but when I finished to uplaod the index, header and stylesheet all the categories were displayed in the header like are now in the sidebar …

    What I missed up ?


  • Any chance of an updated approach to this menu using the new wp_nav_menu functionality.
    Currently you can only view the child category if you mouse over it, it doesnt remain when you move your mouse off. Is it possible for the child categories to only change when another parent page is moused over? I hope this makes sense.

  • This is for programmers only, not for normal people. I don´t understand everything.

  • thanks for sharing but It doesn’t work on wp 3.0.

  • Tried the code in the header.php file in wordpress. This had no effect on a drop down box!!! I dont know if it the version I am using or not !

    Will install a newer version of wordpress and give it another go.

    Thanks anyway