Displaying WordPress categories in a horizontal dropdown menu.

Posted on Wednesday the 16th of January, 2008 at 2:05 pm in Asides, WordPress

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.

  1. <div style="text-align:center;">
  2. <ul id="menu" style="padding:0; margin:0;">
  3. <?php wp_list_categories('sort_column=name&sort_order=asc&style=list&children=true&hierarchical=true&title_li=0'); ?>
  4. </ul>
  5. </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.

  1. ul#menu {
  2. margin: 0;
  3. padding: 0;
  4. list-style: none;
  5. width: 100%;
  6. font-size:1.2em;
  7. }
  9. ul#menu li {
  10. float: left;
  11. padding: 0;
  12. margin: 0;
  13. border-right:solid 1px #fff;
  14. }
  16. ul#menu ul li {
  17. float: none;
  18. position: relative;
  19. border-bottom: 1px solid #7EAED7; /* fixes gap problem in IE */
  20. border-left: 1px solid #FFF;
  21. z-index:1000;
  22. }
  24. ul#menu li ul {
  25. margin: 0;
  26. padding: 0;
  27. display:none;
  28. list-style: none;
  29. position: absolute;
  30. background: #9CC;
  31. }
  32. ul#menu ul ul{
  33. margin-left: .2em;
  34. position: absolute;
  35. top: 0; /* if using borders, -1px to align top borders */
  36. left: 100%;
  37. }
  39. ul#menu * a:hover, ul#menu li a:active{
  40. background:#7EAED7 !important;
  41. color: #FFFFFF;
  42. }
  44. ul#menu li a:link,
  45. ul#menu li a:visited,
  46. ul#menu li a:hover,
  47. ul#menu li a:active{
  48. display: block;
  49. padding: .2em .3em;
  50. text-decoration: none;
  51. background: #5587B3;
  52. color: #FFFFFF;
  53. }
  56. ul#menu ul li a:link,
  57. ul#menu ul li a:visited,
  58. ul#menu ul li a:hover,
  59. ul#menu ul li a:active {
  60. width: 8em;
  61. }
  62. Use the following to copy and paste the code.

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.

  1. <script type="text/javascript">
  2. /*<![CDATA[*/
  4. var mbA,mbT,mbTf,mbSf;
  5. var mbR = [];
  7. function mbSet(m) {
  8. if (document.getElementById&&document.createElement) {
  9. var m=document.getElementById(m);
  10. mbR[mbR.length] = m;
  11. var i;
  13. e=m.getElementsByTagName('a');
  14. if (!mbTf) mbTf=new Function('mbHT();');
  15. if (!mbSf) mbSf=new Function('mbS(this);');
  16. for (i=0;i<e.length;i++) {
  17. e[i].onmouseout=e[i].onblur=mbTf;
  18. e[i].onmouseover=e[i].onfocus=mbSf;
  19. }
  21. m=m.getElementsByTagName('ul');
  22. for (i=0;i<m.length;i++) {
  23. mbH(mbL(m[i]));
  24. }
  25. }}
  27. function mbHA() {
  28. if (mbA) {
  29. while (mbA) mbH(mbA);
  30. mbHE('block');
  31. }
  32. }
  34. function mbHT() {
  35. if (!mbT) mbT=setTimeout('mbHA();', 0);
  36. }
  38. function mbTC() {
  39. if (mbT) {
  40. clearTimeout(mbT);
  41. mbT=null;
  42. }
  43. }
  45. function mbS(m) {
  46. mbTC();
  47. if (mbA) while (mbA&&m!=mbA&&mbP(m)!=mbA) mbH(mbA);
  48. else mbHE('none');
  50. if (mbM(m)) {
  51. mbSH(m,'block');
  52. mbA=m;
  53. }
  54. }
  56. function mbH(m) {
  57. if (m==mbA) mbA=mbP(m);
  58. mbSH(m,'none');
  59. mbT=null;
  60. }
  62. function mbL(m) {
  63. while (m && m.tagName != 'A') m = m.previousSibling;
  64. return m;
  65. }
  67. function mbM(l) {
  68. while (l && l.tagName != 'UL') l = l.nextSibling;
  69. return l;
  70. }
  72. function mbP(m) {
  73. var p = m.parentNode.parentNode;
  74. if (p.tagName == 'UL') {
  75. var i = 0;
  76. while (i <mbR.length) {
  77. if (mbR[i] == p) return null;
  78. i++;
  79. }
  80. } else {
  81. return null;
  82. }
  83. return mbL(p);
  84. }
  86. function mbSH(m,v) {
  87. m.className=v;
  88. mbM(m).style.display=v;
  89. }
  91. function mbHE(v) {
  92. mbHEV(v,document.getElementsByTagName('select'));
  93. }
  95. function mbHEV(v,e) {
  96. for (var i=0;i<e.length;i++) e[i].style.display=v;
  97. }
  98. /*]]>*/
  99. </script>
  100. Use the following to copy and paste the code.

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.
Linking Blogs | Trackback | Top Of Page | Add a Comment
Keywords: , , , , ,
  1. Cecile posted the following on March 11, 2008 at 12:23 pm.

    Please I just don’t understand where in the wordpress files should I put the javascript that enables I.E to read the roll over..

    Do I make a file apart or should I insert it in the index.php or something ?

    Thanks for your reply :-)
    Cecile

    Reply to Cecile
    1. Aaron posted the following on March 11, 2008 at 12:59 pm.

      You insert into your header.php file before </head>.

      Reply to Aaron
      1. Adib posted the following on November 2, 2010 at 11:29 am.

        You should have stated that in your article. Reading through ALL comments is a big fuss.

        Reply to Adib
  2. frerieke posted the following on March 12, 2008 at 6:45 am.

    Hi Aaron!

    great work

    can I use this method also to create a hor. menu of my pages???

    What should I change in the codes?

    thanks, Fre

    Reply to frerieke
    1. Aaron posted the following on March 12, 2008 at 8:54 am.

      If you want to use this method with pages, you should be able to basically change wp_list_categories to wp_list_pages.

      Reply to Aaron
  3. Dylan posted the following on March 21, 2008 at 3:10 am.

    I love the dropdown menu, however, it seems like the subcategories like to magically disappear when moused over. This happens on both my website and yours. Any suggestions to prevent this behavior? It almost seems like the problem is less apparent when using a smaller browser window, but that might not be the case. It does this both in Firefox and Safari (haven’t tested IE yet), and it is present in both though it doesn’t seem to happen as much in Safari.

    Also, just want to clear up where you mention changing the tag; it is missing a quote after the ending parenthesis which breaks the function. As a warning to others, if you copy and paste it, be sure to replace the weird angled single-quote things with a standard single quote. I missed this and it took me forever to catch (fortunately Firefox’s error console pointed it out).

    Reply to Dylan
    1. casey posted the following on July 18, 2008 at 1:41 pm.

      THANK YOU! I just spent 20 minutes trying to figure out what was wrong. Everything worked fine except the drop downs.

      In case anyone isn’t clear how to fix it, add a double quote to the end after the last parenthesis, retype the first double quote so it’s correctly formatted and retype the single quotes around menu.

      Reply to casey
    2. John posted the following on August 4, 2008 at 2:59 pm.

      Any chance you’ve gotten feedback on this? This is a great use of wp with dropdowns, but I too have noticed slightly erratic mouseover behavior on the menus– Safari, Firefox 3 on Mac, IE 6 on Windows XP.

      Thanks, though, Aaron, for the great dev! Great use of menus, and something I’ve been needing for a while.

      Reply to John
  4. Michael posted the following on June 18, 2008 at 8:44 am.

    cheers for this – just have to go in and mess about with it all. As my JavaScript skills are basically rubbish you’ve saved me laods of time.

    Reply to Michael
  5. Cole posted the following on June 24, 2008 at 10:33 am.

    This is what I was looking for. I’ve tried it on my localhost and it works well. Thanks :)

    Reply to Cole
  6. david posted the following on June 24, 2008 at 11:04 pm.

    Thanks for the code but I do have a question.

    You said the following:

    To activate it, change your themeâ??s tag to

    Where do we exactly go to change the tage to ??

    Reply to david
  7. Dheeraj SIngh posted the following on June 28, 2008 at 2:49 am.

    I implemented it but the dropdown thing is not working.Can someone advice me on what is wrong. my site is http://www.reviewmirchi.com

    Reply to Dheeraj SIngh
    1. casey posted the following on July 18, 2008 at 1:50 pm.

      It doesn’t look like you changed the body tag as mentioned in the original post.

      See the section at the end of the last bit of code in the post.

      See my other comment about how to correct the code.

      Reply to casey
  8. dizang posted the following on July 1, 2008 at 9:59 am.

    can you make a plugin for wp? thx..
    or where can i find a plugin.

    Reply to dizang
  9. Adam posted the following on August 8, 2008 at 8:23 pm.

    I just installed this but the drop down menus aren’t showing. Just the “top” categories. Any advice? thanks

    diysrc.com

    Reply to Adam
  10. valenki posted the following on August 16, 2008 at 3:01 pm.

    The drop-down menu may not work, because of the gap is not closed. Change tag to the following (as you see, with the closed gap):

    body onload=â?mbSet(â??menuâ??)”;

    and script will finally start working. Hurrey! )))

    Reply to valenki
  11. CodeKiller posted the following on August 26, 2008 at 9:09 am.

    Why not just use Suckerfish (an 11-line Javascript) instead of your 100-line script? It doesn’t throw errors and simply works, without extra markup and “classitis.”

    Reply to CodeKiller
    1. Aaron posted the following on August 30, 2008 at 6:19 pm.

      My code works on (theoretically) infinate levels of menus. The suckerfish requires a lot of work to get multiple levels as you can see inthis post.

      Each level has to be styled individually by hand which makes it close to worthless in a dynamic setting such as blog categories.

      If you need one level of dropdowns, then by all means, use suckerfish, but I found it didn’t work for what I needed it to do.

      Reply to Aaron
  12. Sam posted the following on September 30, 2008 at 12:16 pm.

    If I use this in my sidebar, how would I edit it so that the menus appear to the right of the category, instead of underneath it?

    Reply to Sam
  13. Kix the Geek posted the following on October 12, 2008 at 5:48 am.

    Hey, thanks a lot Aaron! This just spicened things up back at my blog. Even though I needed to edit a few codes to match my template and for it to be correctly placed, everything was worth it.

    Well done (for sharing this one).

    Reply to Kix the Geek
  14. Paul posted the following on October 27, 2008 at 3:10 am.

    It seems the subcategories like to magically disappear when moused over. This happens on both my website and yours. Any suggestions to prevent this behavior? It almost seems like the problem is less apparent when using a smaller browser window, but that might not be the case. It does this both in Firefox and Safari (havenâ??t tested IE yet), and it is present in both though it doesnâ??t seem to happen as much in Safari.

    Can you suggest a solution to this?

    Reply to Paul
    1. Aaron posted the following on October 28, 2008 at 12:57 pm.

      Paul » Right at the “seams” between links the effect can fail. The easiest way to fix it is to make sure they overlap a little bit in the CSS.

      Reply to Aaron
  15. Tasos posted the following on November 4, 2008 at 6:39 am.

    a fast solution is
    ul#menu li {
    float: left;
    padding: 0;
    margin: -.1em; *************it loses the borders but it works a bit better*******
    border-right:solid 1px #fff;
    }

    Reply to Tasos
  16. Henrique posted the following on December 6, 2008 at 4:22 pm.

    I tried everything and even with the correction on body tag and the sub-categories do not appear. Only the Main-category appears.

    http://www.fast-games.net

    Reply to Henrique
  17. David posted the following on January 26, 2009 at 11:28 am.

    I have installed this code and it all works GREAT! (To my surprise I did it right the first time!) I too noticed the problem with mousing over the sub-menu items. I applied the suggested fix and it does work better, but everything is crammed together. How can the code be modified to pad each entry with some spaces (3 maybe) to allow for some separation between the menu items? I think this would fix the problem (at least the look) of everything being so close together.

    Reply to David
  18. Gadzira posted the following on January 28, 2009 at 3:25 am.

    I am trying to make a list in my sidebar of Categories with a sub list of the posts in that category… somewhat like this:

    2. <a href="category_url" rel="nofollow">CATEGORY</a>
    5. <a href="post_url" rel="nofollow">POST</a>
    8. Use the following to copy and paste the code.

    Obviously I would like this to loop until it has played out all categories and posts within them.

    I am looking for tha code to make this happen in the same list format as I have custom styled menu tool in which i would like this code snippet to play out… so i need to di this WITHOUT A PLUGIN.

    Would really appreaciate any help!!

    Reply to Gadzira
  19. kevin posted the following on April 12, 2009 at 1:50 pm.

    didnt work on my site
    suckerfish is ok but not the greatest

    Reply to kevin
  20. Adam Winogrodzki posted the following on April 20, 2009 at 5:54 am.

    Didnt worked on mine too :(

    Reply to Adam Winogrodzki
  21. Povilas posted the following on May 9, 2009 at 11:58 am.

    In the bottom of article, there is written 3 steps to activate it. In first step there is one thing missing. right after body onload=â?mbSet(â??menuâ??); there is a need of “. So it must look something like body onload=â?mbSet(â??menuâ??);” to work :)

    Reply to Povilas
  22. Nitai posted the following on May 27, 2009 at 6:58 pm.

    Hi,
    I am just starting to build a site with wordpress and I would very much like to have a dropdown menu. However, it is not clear to me where to put the last javascript code you gave in this page; and if you look at my site the menu is stretching out from the side. How to position that? I have no any experience with php only html.

    Thanks in advance for your help.

    Reply to Nitai
  23. Julian posted the following on June 5, 2009 at 4:31 am.

    It doesn’t work for me. I’ve tried to copy the source code of your site too but the categories just don’t drop down…

    Reply to Julian
  24. Justin posted the following on June 14, 2009 at 7:27 am.

    i must be an idiot coz i couldn’t get it to work. probably too much of a n00b

    Reply to Justin
  25. Roman posted the following on August 6, 2009 at 5:03 am.

    Hello.
    Thanks, for your script.

    But how can I force it to work with IE6.

    Thanks

    Reply to Roman
  26. Harpreet Khera posted the following on August 27, 2009 at 7:35 am.

    I have categories and subcategories and i want subcat. to be displayed as drop down list with mouseover on parent category. Any help please..

    Reply to Harpreet Khera
  27. harry posted the following on September 10, 2009 at 5:27 pm.

    I want to try it too. thanks for sharing

    Reply to harry
  28. tech2connect posted the following on December 8, 2009 at 7:29 am.

    Nice tip to display my column in Column Thanks

    Reply to tech2connect
  29. WPExplorer posted the following on December 23, 2009 at 5:15 am.

    Simply amazing. Thank you very much!

    Reply to WPExplorer
  30. Nicole posted the following on January 20, 2010 at 4:38 pm.

    Thank you! This works beautifully. I was about to tell my client, “Nope, not possible”… ;)

    Reply to Nicole
  31. Interior Decorating Schools posted the following on March 23, 2010 at 2:27 pm.

    Guys, for anyone that drop down not show up,maybe becau no post in your sub cat. try add this hide_empty=0

    wp_list_categories(‘sort_column=name&sort_order=asc&style=list&children=true&hierarchical=true&title_li=0&hide_empty=0′);

    Reply to Interior Decorating Schools
  32. Montesquieu posted the following on April 16, 2010 at 1:18 pm.

    Hello, I’m using a code similar to yours. It works great but I have one thing I want to change and I can’t seem to find out how. I want to drop the uncategorized link in the Navbar. Everything else is great.

    Thank you for your help if you can or are willing, and at least thank you for your time.

    Reply to Montesquieu
  33. andyrio posted the following on September 2, 2010 at 8:30 am.

    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 to andyrio
  34. Team Roster posted the following on October 30, 2010 at 5:48 am.

    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 to Team Roster
  35. Adib posted the following on November 2, 2010 at 11:39 am.

    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 to Adib
  36. Baby Tunes posted the following on November 15, 2010 at 7:52 pm.

    Thanks just what I was looking for.

    Reply to Baby Tunes
  37. Philippines Virtual Assistant posted the following on December 11, 2010 at 11:41 pm.

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

    Reply to Philippines Virtual Assistant
  38. du hoc my posted the following on February 4, 2011 at 4:57 am.

    Dear,

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

    Please kindly advise me.

    Thanks

    Reply to du hoc my
  39. cangrejero posted the following on February 13, 2011 at 1:13 pm.

    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 to cangrejero
    1. cangrejero posted the following on February 13, 2011 at 2:06 pm.

      Solved my problem by using z-index. Thanks, anyway!

      Reply to cangrejero
  40. cangrejero posted the following on February 13, 2011 at 9:23 pm.

    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 to cangrejero
  41. lucky_girl posted the following on February 18, 2011 at 1:27 am.

    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 to lucky_girl
  42. Best New Jersey Wedding Photographers posted the following on March 2, 2011 at 8:19 pm.

    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 to Best New Jersey Wedding Photographers
  43. Computer Guide posted the following on May 22, 2011 at 8:15 am.

    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 to Computer Guide
  44. araz posted the following on July 1, 2011 at 4:28 am.

    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 to araz
  45. birthday glitter pictures posted the following on July 4, 2011 at 7:47 pm.

    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 to birthday glitter pictures
  46. mark posted the following on July 11, 2011 at 1:51 am.

    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 to mark
  47. hotellebeach posted the following on August 10, 2011 at 2:57 am.

    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 to hotellebeach
  48. Warrior Macros posted the following on August 23, 2011 at 4:37 am.

    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 to Warrior Macros
  49. cooking games for girls posted the following on October 6, 2011 at 12:53 am.

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

    Reply to cooking games for girls
  50. Melroy posted the following on November 28, 2011 at 6:14 am.

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

    Reply to Melroy
  51. y8 posted the following on December 9, 2011 at 2:15 am.

    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 to y8
  52. Jack posted the following on January 1, 2012 at 10:02 am.

    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 to Jack
  53. Joseph Buarao posted the following on January 15, 2012 at 6:51 am.

    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 to Joseph Buarao
  54. Joseph Buarao posted the following on January 15, 2012 at 6:51 am.

    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 to Joseph Buarao

Leave a reply

:) :D :( :o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: ;) :!: :?: :idea: :arrow: :| :mrgreen: