WordPress Menu Creator CSS Examples

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]

48

About the Author:

K.M “Mack” McMillan comes from a family of REALTORS® and was a Broker himself for 14+ years. Mack built one of the 1st real estate websites in 1994 which helped his family run Agency become the most successful Brokerage in south central Missouri. As the original founder of the UltimateIDX in 2000, Mack continues to serve the real estate community and maintains an advisory role in UltimateIDX.

Comments

  1. bimbolera  July 22, 2009

    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…

    reply
    • Jared Ritchey  July 22, 2009

      Can you show us the domain so I can help you with this.

      reply
      • Jared Ritchey  September 12, 2009

        Indecently, the new release uses widgets so you no longer need to insert the code unless your theme is not widget ready.

        reply
  2. bimbolera  July 22, 2009

    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!

    reply
  3. bimbolera  July 22, 2009

    my new problem now is how can i remove the bullet of the submenu… i hope i can get a help… thanks again!

    reply
  4. music videos  August 4, 2009

    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?

    reply
  5. Justin  August 4, 2009

    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!

    reply
  6. Seminyak Villas  August 18, 2009

    wow nice tutorial! this’s what i’m looking for

    reply
  7. netconstructor  August 18, 2009

    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!

    reply
  8. The Guru  September 5, 2009

    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 ====================*/

    reply
  9. The Guru  September 5, 2009

    This may help some people having issues with links.

    I’ve configured clean permalinks in wordpress, ie. http://www.yoursite.com/about
    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 http://www.yoursite.com/about 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/about http://www.yoursite.com/contact and so on.

    Again, great plugin. Thanks. 🙂

    reply
  10. Jared Ritchey  September 11, 2009

    Hey thanks for the CSS updates, I’ll correct the above code.

    Jared Ritchey

    reply
    • Leslie Evans  January 3, 2010

      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! =-.

      reply
    • Leslie Evans  January 3, 2010

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

      reply
      • SEOWolf  January 21, 2010

        Thanks for the “heads up” Leslie!

        ~SEOWolf

        reply
    • Jared Ritchey  September 12, 2009

      Can you send me details and I’ll help you out.

      reply
  11. Josh Arcadia  September 15, 2009

    I want to make a Menu where every option is a different color on the .jpg image… how can I do that?

    reply
  12. [email protected]  September 28, 2009

    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.
    .-= [email protected] last undefined ..If you register your site for free at =-.

    reply
  13. [email protected]  September 28, 2009

    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.
    .-= [email protected] last undefined ..If you register your site for free at =-.

    reply
  14. [email protected]  September 28, 2009

    Hallelujah! Got it! Thanks for the plugin!!
    .-= [email protected] last undefined ..If you register your site for free at =-.

    reply
    • Jared  October 1, 2009

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

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

      reply
  15. Joerg  October 6, 2009

    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.

    reply
  16. Xtof  October 17, 2009

    Great plugin. If you want css examples : http://www.cssplay.co.uk/menus/

    reply
  17. reward  October 30, 2009

    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?

    reply
  18. [email protected] Santa Fe Homes for Sale  November 2, 2009

    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?
    .-= [email protected] Santa Fe Homes for Sale´s last blog ..San Diego Luxury Home Foreclosures =-.

    reply
  19. Ajax AutoComplete  November 15, 2009

    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 =-.

    reply
  20. [email protected] Net Tutorial  November 29, 2009

    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!
    .-= [email protected] Net Tutorial´s last blog ..ASP.Net Repeater =-.

    reply
  21. Bigorangemachine  December 2, 2009

    Hey.
    This page (http://ultimateidx.com/menu-manager/) should be linking to this page (CSS Example #1 – .

    Other people may not be as savy as me and would think to use the search.

    reply
  22. [email protected] Freeze Header  December 6, 2009

    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.
    .-= [email protected] Freeze Header´s last blog ..JavaScript Ajax Cascading Dropdown =-.

    reply
  23. Jared Ritchey  February 9, 2010

    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

    reply
  24. Gerard  February 16, 2010

    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)

    reply
  25. Gerard  February 16, 2010

    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

    reply
  26. paolo  March 25, 2010

    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…

    reply
    • Jared Ritchey  March 28, 2010

      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.

      reply
      • paolo  March 28, 2010

        we should all thank you for this plugin
        i hope new version will come out soon 🙂

        reply
  27. wpj  May 12, 2010

    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?

    reply
    • Jared Ritchey  May 18, 2010

      Please send me an email directly jared-at-ultimateidx.com and I’ll look at it for you.

      reply
  28. Alex  May 26, 2010

    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

    reply
  29. [email protected] Family Villas  June 11, 2010

    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

    By : Bali Villas Rental

    reply
  30. [email protected]  June 29, 2010

    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!

    reply

Add a Comment


  1. Configuring Ultimate IDX Menu Maker Plugin for the BFA Atahualpa WP Theme | Denver Home Value Realty  July 12, 2009
  2. testing trackback code « Demo WordPress  September 12, 2009
  3. Asp .Net FileUpload to save image to the DataBase - My favourite Articles  December 10, 2009
  4. wp-popular.com » Blog Archive » Wordpress Menu Creator CSS Examples | The UltimateIDX  April 3, 2010