WordPress Menu Creator CSS Examples

Below are some examples of CSS styles that can be copied to your style.css file to complete the styling of your WordPress menus. Be sure to edit the Menu #s. Colors and images can also be edited to match your website theme.

CSS Example #1

Our first example can be seen at www.RELV.com. Both the Top Menu (within the header.php) and the Main Menu (within the sidebar.php) use our WordPress Menu Creator.

You can change save and change the gradient images below and adjust the colors in the CSS to match. Important: Please note where the CSS refers to menu_8 to change to match YOUR menu number. In order to identify your Menu Number in your WordPress Dashboard go to the “WP Menu Manager” under “Tools”. Mouse over your Menu and read the ID number in your status bar at the bottom of the page.

Top Menu (Horizontal)

This code must be included in your style.css file

[css]
/*=-=-=-[Navigation]-=-=-=*/
#topnavigation {
position:absolute;
top:55px;
left:0px;
z-index:105;
background: url(images/navbar.jpg);
width:900px;
height:20px;
font-size:12px;
font-family: Arial, Tahoma, Verdana;
color: #fff;
font-weight: bold;
argin: 0px auto 0px;
padding: 0px;/* border-bottom: 1px solid #8c0000 */
}
#topnavigation a, #topnavigation a:visited {
color: #fff;
font-size: 12px;
text-decoration: none;
padding: 0px 0px 0px 3px
}
#topnavigation a:hover {
color:#fff;
text-decoration:underline;
padding:0px 0px 0px 3px
}
#topnavigation ul {
list-style-type:none;
margin:0;
padding:0;
}
ul#mc_menu_1 {
margin:0px;
padding:0px;
list-style-type: none !Important;
}
#mc_menu_1 a, #mc_menu_1 a:visited {
background:#FFF url(images/navlink.jpg) right;
color:#FFF;
display:block;
font-weight:bold;
text-transform:uppercase;
margin:0px;
padding:2px 17px 2px 15px;
border-right:1px solid #5a0000
}
#mc_menu_1 a:hover {
background:#fff url(images/navhover.jpg) right;
color:#FFF;
margin:0px;
padding:2px 17px 2px 15px;
text-decoration:none
}
#mc_menu_1 li {
float:left;
margin:0px;
padding:0px
}
#mc_menu_1 li ul {
position:absolute;
width:10em;
left:-999em
}
#mc_menu_1 li li {
float:left;
margin:0px !Important;
padding:0px !Important;
width:150px;
}
#mc_menu_1 li li a, #mc_menu_1 li li a:link, #mc_menu_1 li li a:visited {
background:#d71c22;
width:150px;
float:none;
text-transform:none;
margin:0px;
padding:2px 10px 2px 10px;
border-bottom:1px solid #8c0000;
border-left:1px solid #5a0000;
border-right:1px solid #5a0000
}
#mc_menu_1 li li a:hover, #mc_menu_1 li li a:active {
background:#8c0000;
padding:2px 10px 2px 10px
}
#mc_menu_1 li:hover ul {
left:auto;
display:block
}
#mc_menu_1 li:hover ul, #mc_menu_1 li.sfhover ul {
left:auto
}
/*=-=-=-[End Navigation]-=-=-=*/
[/css]

Place the following where you want the menu to render.

[php]<?php displayMenu(1, 2); ?>[/php]

Right Click and “Save Image” Menu Images:

Or Download Image File.

Main Menu (Right Side)

This menu is NOT cascading (no child levels) so the CSS does not need to refer to the menu number and no images are used, only background colors. Additional styling for fonts, sizes, colors and weight can be added.

[css]
#rightmenu li {
}
#rightmenu li a {
display:block;
padding:3px 8px;
background:#d8c7a9;
width:244px;
}
#rightmenu li a:hover {
background:#dfd0b1;
}
#rightmenu ul a {
text-decoration:none;
}
[/css]

42 Comments

  1. Avatar for bimbolera

    this instruction confuses me… help… i tried to insert the displayMenu(1, 2); ?> to my header file and copied the css listed above, and then, when i updated my page, the main menu is blank(plain white) but when i hovered my cursor and it detected a link, the submenu is working, it has color and all.. i hope someone can help me, and also the submenu is bulleted. i wish the bullet to be gone. i hope someone can help me and thank you… more power…

  2. Avatar for bimbolera

    i have solved my problem! woot! great code, i scrutinized the code and it has something to do with the image url, i changed it to the location of the uploaded images (particularly upload folder of the wordpress) and everything was a-OK! more power!

  3. Avatar for music videos
    music videos says:

    Thanks for the info- it turns out Microsoft’s bing really is making an impact, it seems to me your blog is getting a lot of search engine traffic from bing- have you found this to be the case?

  4. Avatar for Justin

    Thanks for such an awesome WordPress plugin and CSS example! I ended up changing the position to relative, but otherwise the CSS code is fantastic!

  5. Avatar for netconstructor
    netconstructor says:

    I recently have attempted to utilize the wp-menu-creator plugin which requires menu item entries to specific main category pages. In reviewing the plugin I believe you mentioned that version 1.1.6 has this capability however I don’t find any documentation or instructions on how such elements are included. Currently my hack involves posting the URL as an external link which however has the negative effect of not automatically changing the css to the active state.

    Would you kindly outline how this (links to category main pages) are done as well as any other features that might be possible (such as tag pages and so on…)

    Thanks for a great plugin BTW. If I might make a suggestion… I believe two key things would be VERY useful changes in the next release.

    1) Ajax Drag/Drop Sorting of menu elements
    2) The ability of being to directly include php code as an individual menu entry.

    I am always dealing with creating sites that require menus that not only link to pages but also to main category pages, individual posts, tags,… Generally, we want to keep things as simple as possible for the end user managing things. For these reasons I feel it would be great to be able to include (for example) some individual menu entires for specific pages, categories but with the additional ability to include a simple “wp_list_pages” entry with any applicable options as a menu entry as well…. Under this example, hard coded menu elements would remain static but if a customer adds/modifies standard page, these would automatically show up as well.

    Just a thought 🙂

    Keep up the great work my IDX Guru!

  6. Avatar for The Guru

    This may help some people having issues with links.

    I’ve configured clean permalinks in wordpress, ie.
    I’ve noticed that when configuring a menu and selecting “Type: Page or Post” and inputting “about” with no quotes, all my menu links are equal to the page I’m on. Meaning all links are if I’m on the about page.
    But setting “Type: External Link” with the same input results in exactly what I’m looking for. All links resolve to *http://www.yoursite.com/contact and so on.

    Again, great plugin. Thanks. 🙂

  7. Avatar for The Guru

    Bad css. The plugins fantastic, but this css is bad. Open tags, misspelled properties, no need for absolute tags. Most people to use this plugin will not catch these errors.

    Here’s a few examples….

    absolute, top, left, and z-index not needed here. A 100% width would suffice, instead of fixed width. Spelling error, argin? Should be margin.

    #topnavigation {
    position:absolute;
    top:55px;
    left:0px;
    z-index:105;
    background: url(images/navbar.jpg);
    width:900px;
    height:20px;
    font-size:12px;
    font-family: Arial, Tahoma, Verdana;
    color: #fff;
    font-weight: bold;
    argin: 0px auto 0px;
    padding: 0px;/* border-bottom: 1px solid #8c0000 */
    }

    Lots and lots of open tags. Open tags in:
    #topnavigation a, #topnavigation a:visited
    #topnavigation a:hover
    #mc_menu_1 a, #mc_menu_1 a:visited
    #mc_menu_1 a:hover

    and on and on. Not going to list them all, as there’s more with open tags than complete.

    Here’s my cleaned up version. This has been compressed and validates with one warning, instead of 1 error and 16 warnings. Happy coding.

    /*================ Navigation =================*/
    #topnavigation {
    background:url(images/navbar.jpg) repeat;
    width:100%;
    height:20px;
    font-size:12px;
    font-family:Arial, Helvetica, sans-serif;
    color:#fff;
    font-weight:700;
    margin:0 auto;
    padding:0;
    }

    #topnavigation a,#topnavigation a:visited {
    color:#fff;
    font-size:12px;
    text-decoration:none;
    padding:0 0 0 3px;
    }

    #topnavigation a:hover {
    color:#fff;
    text-decoration:underline;
    padding:0 0 0 3px;
    }

    #topnavigation ul {
    list-style-type:none;
    margin:0;
    padding:0;
    }

    ul#mc_menu_1 {
    list-style-type:none !important;
    margin:0;
    padding:0;
    }

    #mc_menu_1 a,#mc_menu_1 a:visited {
    background:url(images/navlink.jpg) repeat;
    color:#FFF;
    display:block;
    font-weight:700;
    text-transform:uppercase;
    border-right:1px solid #5a0000;
    margin:0;
    padding:2px 17px 2px 15px;
    }

    #mc_menu_1 a:hover {
    background:url(images/navhover.jpg) right;
    color:#FFF;
    text-decoration:none;
    margin:0;
    padding:2px 17px 2px 15px;
    }

    #mc_menu_1 li {
    float:left;
    margin:0;
    padding:0;
    }

    #mc_menu_1 li ul {
    position:absolute;
    width:10em;
    left:-999em;
    }

    #mc_menu_1 li li {
    float:left;
    width:150px;
    margin:0 !important;
    padding:0 !important;
    }

    #mc_menu_1 li li a,#mc_menu_1 li li a:link,#mc_menu_1 li li a:visited {
    background:#d71c22;
    width:150px;
    float:none;
    text-transform:none;
    border-bottom:1px solid #8c0000;
    border-left:1px solid #5a0000;
    border-right:1px solid #5a0000;
    margin:0;
    padding:2px 10px;
    }

    #mc_menu_1 li li a:hover,#mc_menu_1 li li a:active {
    background:#8c0000;
    padding:2px 10px;
    }

    #mc_menu_1 li:hover ul {
    left:auto;
    display:block;
    }

    #mc_menu_1 li:hover ul,#mc_menu_1 li.sfhover ul {
    left:auto;
    }
    /*=================== End Navigation ====================*/

    1. Avatar for Leslie Evans
      Leslie Evans says:

      I have a dummy version of WordPress installed where I am trying to master your plugin to then install it on a small publisher’s website.

      I have created a sample menu (#1), and added the following line to my default theme header:

      (tried it with and withour the div, makes no difference.)

      I added the long sample code for Navigation to the rtl.css file in the same directory.
      The menu appears, but it ignores all the formatting of the css file, and just give small bulleted type with everything visible at once, no drop-down, instead of the effect on your sample website, which is what I want. Does this have anything to do with the designation mc_menu_1 rather than just menu_1? Really stuck here and thanks for any help.
      .-= Leslie Evans´s last blog ..Hello world! =-.

    2. Avatar for Leslie Evans
      Leslie Evans says:

      Never mind. Problem solved. The theme had two CSS files and I was editing the wrong one.
      .-= Leslie Evans´s last blog ..Hello world! =-.

  8. Avatar for George@CoconutProducts
    George@CoconutProducts says:

    This is a fine menu plugin, thanks for that!

    … but – Huston we have a problem! … at – The menu refuses to collapse.

    I Added I see the second level, but always extended. I can’t find the error; can anybody have a look please? Thank you.
    .-= George@CoconutProducts´s last undefined ..If you register your site for free at

  9. Avatar for George@CoconutProducts
    George@CoconutProducts says:

    Can’t find out how not to expand the menu… It is actually better to see here: on the sub page. The menu also pushes the content box down…. I would love to get this working. Thanks for any ideas.
    .-= George@CoconutProducts´s last undefined ..If you register your site for free at =-.

  10. Avatar for George@CoconutProducts
    George@CoconutProducts says:

    Hallelujah! Got it! Thanks for the plugin!!
    .-= George@CoconutProducts´s last undefined ..If you register your site for free at =-.

    1. Avatar for Jared

      Most welcome, be sure to check the update later tomorrow.

      Jared Ritchey
      .-= Jared´s last blog ..OpenRealty Duplicate Content and 404 URL Tip =-.

  11. Avatar for Joerg

    Hi.
    Thanks for this great plugin, but I have two questions:

    1. I need a third level and added these CSS:

    #mc_menu_1 li ul li ul {
    position:absolute;
    width:10em;
    left:-999em;
    margin: -20px 0 0 0 !important;
    visibility:hidden;
    }
    #mc_menu_1 li li li {
    float:left;
    width:150px;
    margin:0 0 0 171px !important;
    padding:0 !important;
    }
    #mc_menu_1 li li li a,#mc_menu_1 li li li a:link,#mc_menu_1 li li li a:visited {
    background:#d71c22;
    width:150px;
    float:none;
    text-transform:none;
    border-bottom:1px solid #8c0000;
    border-left:1px solid #5a0000;
    border-right:1px solid #5a0000;
    margin:0;
    padding:2px 10px;
    }
    #mc_menu_1 li li li a:hover,#mc_menu_1 li li li a:active {
    background:#8c0000;
    padding:2px 10px;
    visibility:visible;
    }
    #mc_menu_1 li:hover li:hover ul {
    left:auto;
    display:block;
    visibility:visible;
    }
    #mc_menu_1 li:hover li:hover ul,#mc_menu_1 li.sfhover li:hover ul {
    left:auto;
    visibility:visible;
    }

    That works for me, but the mouse-over is not like it should be. A parent in the second level can not be hovered over the linktext? Maybe you try it out to understand what I mean?

    2. How can I hide Items for non logged in Users? At best the plugin “User Access Manger” can be considered? It can be found here: http://wordpress.org/extend/plugins/user-access-manager/

    Thanks for your help.

  12. Avatar for reward

    I’ve created my site using joomla, ( )
    and I want to re-create using wordpress, ( ) offcourse I need menu for wordpress and WordPress menu creator is so helpfull.
    Unfortunetely I confused to make sub menu, I still fail, so.. anyone can give me solution to make menu in wordpress like in joomla in my site?

  13. Avatar for Geoff@Rancho Santa Fe Homes for Sale
    Geoff@Rancho Santa Fe Homes for Sale says:

    That was nice of The Guru to point out the code cleanup issues. I have the old code on my San Diego real estate site. Do I need to download your changes Jared?
    .-= Geoff@Rancho Santa Fe Homes for Sale´s last blog ..San Diego Luxury Home Foreclosures =-.

  14. Avatar for Ajax AutoComplete
    Ajax AutoComplete says:

    That is why asp.net is much better in web development. I worked in PHP. I have written endless scripts for even simple things. after moved to ASP.Net i feel like i have tons of other things to concentrate than re inventing the wheel. The menu and treeview (there are a lot) should be used with few lines of code.
    .-= Ajax AutoComplete´s last blog ..WPF TreeView Binding With Relational Dataset =-.

  15. Avatar for Ray@Vb Net Tutorial
    Ray@Vb Net Tutorial says:

    Thanks for such an awesome WordPress plugin and CSS example! I ended up changing the position to relative, but otherwise the CSS code is fantastic!
    .-= Ray@Vb Net Tutorial´s last blog ..ASP.Net Repeater =-.

  16. Avatar for Steve@Gridview Freeze Header
    Steve@Gridview Freeze Header says:

    because of this (margin:0px !Important) i couldnt change the margin to the menu item. Can i change it in the stylesheet? or else Can i remove the !Important? what will happen if i remove this!Important?

    sorry for too many questions. But i need to fix it for one of my application

    thanks for the great tutorial.
    .-= Steve@Gridview Freeze Header´s last blog ..JavaScript Ajax Cascading Dropdown =-.

  17. Avatar for Jared Ritchey
    Jared Ritchey says:

    Important just tells it to consider that as having precedence over other directives. With CSS precedence follows position in style sheet and the rules of specificity.

    Jared

  18. Avatar for Gerard

    I’m still trying te get a 3 level menu working.
    I tried the css from Joerg (October 6, 2009 at 2:14 am) but have the same problem.
    It works correct only, when you ‘mouse over’ the none-text part of the second level button.

    Is there someone who can help?

    Regards, Gerard
    (sorry for my bad english)

  19. Avatar for Gerard

    I found a solution for the 3th level that worked for me.
    Just added:

    /* ===== 3th level ===== */

    #mc_menu_1 li ul ul{
    left:auto;
    display: block;
    margin: -27px 0 0 171px; /* change px here to get boxes connected */
    }

    #mc_menu_1 li:hover ul ul, #mc_menu_1 li:hover ul ul ul, #mc_menu_1 li.sfhover ul ul, #mc_menu_1 li.sfhover ul ul ul {
    left: -999em; display:block;
    }

    #mc_menu_1 li:hover ul, #mc_menu_1 li li:hover ul, #mc_menu_1 li li li:hover ul, #mc_menu_1 li.sfhover ul, #mc_menu_1 li li.sfhover ul, #mc_menu_1 li li li.sfhover ul {
    left: auto;
    }

    /* ===== End 3th level ===== */

    Thanks for the great plugin,

    Gerard

  20. Avatar for paolo

    plugin is fine, but wouldn’t it be better if people could choose categories as well and not only post/pages?
    it’s quite annoying to use external url for categories when you have to move the site on another domain…

    1. Avatar for Jared Ritchey
      Jared Ritchey says:

      Actually thats a great idea, not many people link directly to a category but I’m going to add that to the planned feature list.
      Thank you for your input.

  21. Avatar for wpj

    hey…
    i got a problem with ie6… the dropdown menu wont come out… need some help…
    in firefox ie8 ie7 chrome netscape etc. it works perfect… but in ie6 i got that problem … can u help me?

  22. Avatar for Alex

    Hi,

    How can I mark a menu as “selected”?
    So if I click on a menu, let’s say, “Services”, when the page is displayed, I want to mark menu item Services as selected, custom color…
    I’m using the plugin and the css listed above, everithing is ok, but I didn’t find any way to do the select option.

    Thank you,
    Alex

  23. Avatar for Devra@Villa in Bali
    Devra@Villa in Bali says:

    Hey….
    for a long to serching this plugin, thanks for adding this plugin, this is very helpful ..

    Please keep this up to date.

  24. Avatar for Indra@Bali Family Villas
    Indra@Bali Family Villas says:

    This is great CSS menu style you can copy this script and paste to a new Project HTML in Dreamweaver :

    Style 10 (Lawn Green) – Menu by Apycom.com

    <!–

    * { margin:0;
    padding:0;
    }
    body {
    background:#222;
    overflow:hidden;
    margin: 0px;
    }
    #table {
    width: 860px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    }
    div#menu {
    top:40px;
    left:0px;
    width:100%;
    background:transparent url(images/header_bg.gif) repeat-x 0 0;
    }#menu {
    position:relative;
    z-index:100;
    height:43px;
    }
    #menu .menu {
    position:absolute;
    padding-left: 40px;
    background: url(images/header.gif) right top no-repeat;
    }
    #menu * {
    list-style:none;
    border:0;
    padding:0;
    margin:0;
    }
    #menu a {
    display:block;
    padding:15px 14px 14px 14px;
    white-space:nowrap;
    }
    #menu li {
    float:left;
    background:#fff;
    }
    #menu li li {
    float:none;
    }
    #menu div {
    visibility:hidden;
    position:absolute;
    background:url(images/pix.gif);
    }
    #menu div div {
    margin:-35px 0 0 -1px;
    left:100%;
    }
    #menu div div div {
    margin:-35px 0 0 -1px;
    left:100%;
    }
    #menu li:hover>div { visibility:visible; }

    /* menu::special styles */
    /* menu::level 1 */
    #menu a {
    text-decoration:none;
    color:#ffffff;/*1*/
    position:relative;
    z-index:77;
    }
    #menu a:hover {
    background:url(images/header.gif) left -43px repeat-x;
    color:#FFF;
    }
    #menu a:hover span { color:#FFF; }
    #menu li.current a {
    background: transparent url(images/header_active.gif) repeat-x;
    color:#3C4955;
    }
    #menu li.current span {
    color:#3C4955;
    }
    #menu>ul>li:hover>a {
    background:url(images/header.gif) left -43px repeat-x;
    color:#CACFD3;
    }
    #menu>ul>li:hover>a span { color:#FFF; }
    #menu span {
    text-transform:uppercase;
    font:9px ‘Lucida Grande’,’Lucida Sans Unicode’,Arial,Verdana,sans-serif;
    letter-spacing:0.3em;
    text-decoration:none;
    color:#ffffff;
    }
    #menu li { background: url(images/header.gif) left top no-repeat;}
    /* menu::level >= 2 */
    #menu ul ul {width: 150px;}
    #menu li li{
    background:#64A13C;
    border-bottom:1px solid #95E459;}
    #menu li li a {
    position:static;
    background:#64A13C;
    white-space:normal;
    text-align: center;
    color:#FFF;
    padding:0;
    text-transform:none;
    width: 100%;
    }
    #menu li.current li a {
    background: none;
    color:#FFF;
    }
    #menu li.current li span {
    color:#FFF;
    }
    #menu li li a:hover { background:#71DB23; }
    #menu li li a span { color:#fff; line-height: 15px; padding: 10px; }
    #menu li li a:hover span { color:#ffffff; }
    #menu li li a.parent span{background:transparent url(images/arrow.gif) no-repeat scroll right 50%; z-index:10; }

    #menu li li span {
    display:block;
    text-transform:none;
    padding:0px 25px 0px 0px;
    font-size:11px;
    letter-spacing: 0;
    }
    –>

    Home

    Sub Item 1

    Sub Item 1.1

    Sub Item 1.1.1
    Sub Item 1.1.2

    Sub Item 1.2
    Sub Item 1.3
    Sub Item 1.4
    Sub Item 1.5
    Sub Item 1.6

    Sub Item 1.7

    Sub Item 1.7.1
    Sub Item 1.7.2

    Sub Item 2
    Sub Item 3

    Product Info

    Sub Item 1

    Sub Item 1.1

    Sub Item 1.2

    Sub Item 2

    Sub Item 2.1

    Sub Item 2.2

    Sub Item 3
    Sub Item 4
    Sub Item 5

    Sub Item 6
    Sub Item 7

    Help
    Contacts

  25. Avatar for johan@kids-tableandchairs
    johan@kids-tableandchairs says:

    I just signed up to wordpress to have my owen blog. This is a great tips and guidelines for me in building it up. Thanks!

Leave a comment

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