dropdown-menu-widget-brand-new-200x200

Tutorial: Create your very own dropdown menu stylesheet

on April 4, 2010 | 41,505 views

I’ve created a very simple plugin for creating and adding dropdown menus to your page. In this simple step-by-step tutorial i will try to explain how to create your own theme with simple css edits. All you need to do is to follow those simple steps and you will have one great css-only dropdown with colors you like!

1 First we need to set default theme to NONE for the dropdown menu. You can do that from the “Dropdown Menu” item under your WordPress Settings.

2 Then open your theme stylesheet from Appearance -> Editor. Make sure your current theme is selected. Select Stylesheet from Styles and scroll to the bottom of the file. You can add a reminder using /* and */ slashes as in the image. We will create our css rules after this line.

3 Dropdown menu css tree is defined in following way.

.shailan-dropdown-menu -> main container of the menu (div element)
ul.dropdown -> top list
ul.dropdown li -> top list item + sub items (refers to <li> elements under <ul>)
ul.dropdown li a -> menu links
ul.dropdown li ul -> sub lists

4 First we add a background image to top level using the .shailan-dropdown-menu class:

.shailan-dropdown-menu { background:#000000 url("your-image-here.jpg") top right repeat; }

“#000″ defines background color to be black. Look here for more html color codes. Your background image should be in your theme directory. Otherwise you should put a full url like “http://shailan.com/sample.jpg”. Other k-words define positioning and repeating of background. Visit here for more info on background.

5 Second most important thing on the menu style is the link style:

.shailan-dropdown-menu ul.dropdown li a {
	padding: 5px 15px;
	font-size: 1em;
	color:#ffffff; }

Here we defined top-bottom (5px) and right-left (15px) padding values. And we set color to white.

6 Now let’s define the mouse over style for the links:

.shailan-dropdown-menu ul.dropdown li a:hover {
	font-style: italic;
	background-color:#ffffff;
	color:#333333; }

This rule defines that when we move mouse over (hover) a link (< a > element in html) it will have white (#ffffff) background color and text will be a dark gray (#333333). Text will become italic also.

[adsense type="medium-rectangle" align="center"]

7 One more additional style will be dropdown background:

	.shailan-dropdown-menu ul.dropdown li ul{ width:auto; background:#333333; background: url(images/opacity.png);
		border-radius: 4px;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		-khtml-border-radius: 4px; }

This is a rather complex rule. This rule defines background for the dropdown menu’s when you move over a link. Here we set it to have a gray(#333333) background. Then we put a background image to it. Transparent pixels don’t work in older Internet Explorer browsers. You should get Google chrome really if you are still using IE. Here we also add corner radius which is also not supported by Internet Explorer.

8 The last style rule comes for the current page or category link. If you want current page or category seem different than other links add following:

.shailan-dropdown-menu ul.dropdown li.current_page_item>a,
	.shailan-dropdown-menu ul.dropdown li.current-cat>a,
	.shailan-dropdown-menu ul.dropdown li.current-cat>a:hover,
	.shailan-dropdown-menu ul.dropdown li.current_page_item>a:hover{
	color:#333333;
	background: white; }

This will make your current page/category have a white background with dark gray text.

9 Now to wrap it up here is the final code:

/* MY-DROPDOWN-STYLES */
.shailan-dropdown-menu { background:#000000 url("your-image-here.jpg") top right repeat; }
.shailan-dropdown-menu ul.dropdown li a {
	padding: 5px 15px;
	font-size: 1em;
	color:#ffffff; }
.shailan-dropdown-menu ul.dropdown li a:hover {
	font-style: italic;
	background-color:#ffffff;
	color:#333333; }
.shailan-dropdown-menu ul.dropdown li ul{ width:auto; background:#333333; background: url(images/opacity.png);
		border-radius: 4px;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		-khtml-border-radius: 4px; }
.shailan-dropdown-menu ul.dropdown li.current_page_item>a,
	.shailan-dropdown-menu ul.dropdown li.current-cat>a,
	.shailan-dropdown-menu ul.dropdown li.current-cat>a:hover,
	.shailan-dropdown-menu ul.dropdown li.current_page_item>a:hover{
	color:#333333;
	background: white; }

And we are done!

Conclusion

Now that you know how to create a simple dropdown menu style, you can download the widget and start building your own menu theme!

About Shailan.com Staff

Shailan.com is a design blog about WordPress and web design. We regularly write about wordpress, plugins, themes, web design resources, php, css, jquery, adsense and more.. If you want to get notified about our posts, be sure to subscribe to our feed or follow us on facebook.

Share Your Thoughts

Your email address will not be published.


58 thoughts on “Tutorial: Create your very own dropdown menu stylesheet”

  1. Benek says:

    I need selector to each current item in menu. i need have different color in each menu item. Can you help me ?

    1. Matt Say says:

      Each menu item has its own class. You can view source of your page and see them yourself (Eg. menu-item-2086).
      You can use that for background colors like this:

      ul.dropdown-menu li.menu-item-2086{
        background-color:#2277dd; 
        color: #ffffff;
      }
      1. Benek says:

        ok but i need current element ! I need change color on current element. I need have different color i each current element.

        1. Matt Say says:

          You can use those selectors for current menu item:

          li.current-menu-item > a /* Selector for hand built menus via Appearance>Menus */,
          li.current_page_item > a /* Selector for page menus */,
          li.current-cat > a /* Selector for current category */ {
              font-weight: bolder;
          }
          

          Please note that if you use the code that way, it will affect all links with that class (E.g. Your categories widget will also apply this style). To overcome this, you may provide a wrapper id before selector:

          div#my-menu-wrapper-id li.current-menu-item > a{ font-weight:bolder; }

          This code will only apply to current menu item inside that wrapper div element.

          1. Benek says:

            i need use #menu-item-43 li.current-menu-item > a{ font-weight:bolder; } for example to style only this current element. But this code ^^ not working

  2. Pranav says:

    Hi ,
    I am not getting the home link on the top menu .I also wants to know how to change the order of the menu item .

    Thanks
    Pranav

    1. Matt Say says:

      Please check dropdown menu troubleshooter here.

  3. Perry says:

    Please disregard my question.. Obviously there was something else wrong with my site.. Plugin works perfectly now..

  4. Perry says:

    Great plugin. Very easy to use. Thanks so much for making it.

    I have a question.. Is there any way to make the 2nd level drop down go straight down instead of off to the right?

    Thx again for a great plugin.

  5. Scott says:

    I just noticed how to fix my issue, sorry … I saw there was another class current-menu-item that showed up instead. Targeting that class worked perfect.

  6. Scott says:

    Love the plugin, I have it all styled the way I wanted it but lost the current_page_item class when I switched the menu to the custom menu I created in WordPress.

    In other words if I don’t chose the menu type for pages or category there’s no css class for the active or current page with a custom menu.

    Any suggestions would be great. I’m very familiar with css and WordPress so I should be able to follow your suggestions without trouble, thank you.

  7. Angie says:

    First of all, thank you for creating this widget, although, How can I get the menu to be on one line or get the theme to follow the menu into the 2nd line? Does this make sense?

  8. andrewdelman@gmail.com says:

    Is there any way I can make the drop down gallery be a drop up gallery? for example if the navigation was bellow the content and slides up when rolled over…

    1. Metin Saylan says:

      Yes you can do this using Custom CSS area.
      Just put this code in there:

      ul.dropdown li ul{ top: auto !important; bottom: 100% !important; }

      This should do it.

  9. alx359 says:

    Hey, Shailan!

    Very nice plugin, thank you very much!

    Would suggest adding of new templates to be a bit more flexible? Now you hard-code all ones shipped in shailan-dropdown-menu-options.php, so if I wish to add mine css it won’t be automatically visible. If I edit the php, changes will get lost on the next update, etc,

    I’d suggest just scan the themes directory for the css files and get their pretty names from some properly formatted comment at the top, just like WP does with themes.
    Cheers!
    Alex

  10. Hi Shailan,

    What will I change with this code if I want a click before the dropdown rather than a mouse hover? Your widget and codes are very helpful. Thanks.

  11. Hi, I am having problems setting it up:

    I want this dropdown menu to replace my current menu on http://kunstnerblog.simtanda.com/

    I know i have to place this code in my template.

    But wich template and wich line?

    1. shailan says:

      Hello Hans, I see you are using twentyten as a theme. You can switch your theme to twentyeleven theme i created, and you will have a widget area just below the header. Get latest version here.

  12. Josh says:

    Is there a selector for the current li/page item’s parent menu – Is there a way to style the current top menu item instead of (or in addition to) the specific child page within the drop down?

    Something like:
    .shailan-dropdown-menu li.current_page_item>a{
    }

    Thanks.
    Awesome plugin!

    1. shailan says:

      Yes, this is supported with wordpress page navigations. The selector is:

      ul.dropdown li.current_page_parent a{ /* CSS */  }
      1. Josh says:

        Thanks for the reply! That selector seems to however style all subsequent children as well. Am I missing something?

        1. shailan says:

          You need to revert sub children using sub selector:

          ul.dropdown li.current_page_parent li a{ /* CSS */  }

          Actually you can use “>” but this only works on modern browsers.
          It won’t work in many Internet Explorer versions.
          IE makes us take the long way like this.

          I hate IE :/

  13. senf says:

    it´s me again :)
    Have a Look at the shiny-black menu theme.
    Is there a way to change the hover effect into a static one – just like a normal background?

    I only want a resizeable background ;)

  14. Gecko says:

    Love your work :)
    Is there an easy way I can adjust what order the links appear in the menu ?

    1. shailan says:

      Uh oh, thats the main problem with all the wordpress users i guess. You can use Menus under Appearance to create custom menus with custom orders. Not so practical but still does the job. You can then select it from the dropdown menu menu type selector. I hope that helps.

      1. Gecko says:

        Perfect, many thanks again :)

  15. Chris V. says:

    Just getting my feet wet with your great plug in. Question: do you have any tutorial or tips for styling the vertical flyout configuration?

    Thank you!!!
    Chris

    1. shailan says:

      Hello Chris, styling vertical menus are jsut as same as long as you don’t mess with display:block & top, left attributes. Changing colors won’t mess your vertical menus. Basicly a horizontal menu’s li elements have display:inline, a vertical menu has display:block. I hope that give you some idea.

    1. shailan says:

      I didnt understand anything :?

  16. Donyo says:

    Great plugin,
    Is it possible to display both pages and categories titles in drop-down in one page at same time. lets say, pages titles in one row and in next row all categories (view this page to get better idea http://malleable.developdaly.com/ ).

    One more thing, how it is possible just not to display uncategory title from categories.

    Highly appreciate if you can reply ASAP, Thank you

    1. shailan says:

      Hello Donyo, you can use dropdown multi widget installed with dropdown menu. It currently doesn’t have a template tag though. Just supports widgets.

    2. shailan says:

      To hide Uncategorized from the menu just enter 1 to the Exclude area. This will hide Uncategorized (id:1) from the dropdown menu.

  17. jelly says:

    shailan,
    many thanks for your slick works; they add tons to a site.
    i’m a real rookie, however, and so i need basic guidance to get some of the stuff you do. i wonder if you would be so kind as to guide me to a resource that i could use to learn more about css and the rest of the stuff you do. (i’m thinking ebook, pbook, or whatever.)
    (thanks!)
    jelly

  18. Nanda says:

    How do I remove the shadow effect that appears when you select the Color Scheme ‘theme’?

    1. shailan says:

      You can remove it using these snippets:

      ul.dropdown ul { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow:none; /* Each rule is for a different browser */ } 
      
      ul.dropdown ul { text-shadow: none; } 
      
  19. Aa says:

    My nav just looks unstyled no matter what I do.

    Looking at Firebug, .shailan-dropdown-menu actually has another 2 divs inside it, #shailan-dropdown-wrapper–1 and #dropdown-horizontal-container dm align-left with a table inside that.

    The CSS on this page is obviously for styling an unordered list. I would say I have an old version but I just downloaded and installed 1.5.6 so… completely confused.

  20. Matthew says:

    How does one reduce the vertical spacing between parent and child items on the drop down list?

  21. Great plugin – tried several dropdown plugins and this seems to be the best in many ways.

    I can’t figure out the CSS though.. I was so lucky that replacing the navigation-function with the functions that inserts this menu instead it just looks perfect – except for the items actually “dropping down” – the sub pages. E.g. hovering over “Produkter” here: http://www.casi.dk/

    - Could you tell me a css code to put into the style sheet to change the bacjground color of the sub pages?

    THANK YOu very much!

    1. shailan says:

      Put this code in the custom css area:

      #menu li li { background: #00A4BD }

      This will give dropdown menus a background color.

      1. THANK YOU! Worked like a charm.

  22. Durwin says:

    Can you do me a favor and tell me exactly where you place the code for your menu bar at the top of the wp-theme Atahualpa. I can get the widget for the side bars, but I have no exp w/ css, php, flash, just html. I like the style and layout of your plugin, but I need a little assistance learning how to install them.

    Thanks for your help!

  23. Paul says:

    Hi there. Great plugin ! I tried adding the custom code as given in the tutorial but it’s not working properly. I guess the Dreamline template I am using on WP is interfering with it? I’m a CSS newbie but basicallly I want to keep the nav bar button styling that the Dreamline template creates, but the dropdown menus should be different styling. Currently the dropdown buttons that your plug in creates are the same as the nav bar buttons but as they are tabs it doesn’t look very good. That’s why I tried adding the custom CSS code to try and override the problem but it’s not working. Where do I need to start looking to get this to work? Many thanks in advance. Best regards, Paul

  24. Omid says:

    yes, underneath my header image,
    in fact I want to move it vertically,
    move it x Pixel down, it’s too top for me.

    1. shailan says:

      Hello Omid,
      You can add a top margin to the menu. Here is how to do it:
      .shailan-dropdown-menu{margin-top:20px;}
      This will add a 20px margin to top of menu. For absolute positioning you may also try:
      .shailan-dropdown-menu{ position:relative; top:20px; }
      This way menu will come in front of other objects.
      Hope that helps.

  25. Omid says:

    wow, Fantastic
    my blog has header image, the menu is located over it.
    how can I move it down some pixel?

    1. Milton says:

      I moved the whole menu beneath my header by placing it after the header image in the header.php file of my theme. That’s not what you’re talking about is it? You want the menus to appear underneath your header image???

  26. Em says:

    Hm, I figured it out using this plug-in http://wordpress.org/extend/plugins/page-lists-plus/

    It works! So disregard… Thanks again

    1. shailan says:

      Thanks for the tip. I added it to FAQ.

  27. Em says:

    Hi, thanks for the great plug in, just one question:
    Is there a way to make a parent page not link to anywhere? For example, under “Services” I have Child Pages 1, 2 & 3 – I don’t want the parent page “Services” to be clickable – but for those without drop downs, they should remain clickable. Thanks for any input or thoughts…

  28. Milton says:

    I’m trying to figure out why I have a double bubble on my menus. When you hover over a menu item it is duplicated in a grey bubble.

    It seems like it’s the title attribute but I have that unchecked in Settings, Dropdown Menu. When I check it the double bubble goes away but I loose all my css that I had set up in the menus.

    Any thoughts? I don’t know code but I’m trying my best to figure it out…

    Thanks for your help, and the great plug-in!

  29. I just installed the dropdownmenu thing and fiddled around with the code a bit but…
    Where do I change the font size and the font colour? I have no idea when it comes to code, I… well… have really no idea.

    1. shailan says:

      You can change the font and font size using the code below:
      .shailan-dropdown-menu ul.dropdown{font:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif; font-size: 10px;}

      If it doesn’t change it try using an ID override like below:
      #header ul.dropdown{..font css here..}

      I will add an option for this in the next version.

  30. Rebekah says:

    Can I set the width on the drop downs? They go all the way to the edge of the page.

    1. shailan says:

      Yes you can set its width using:
      .shailan-dropdown-menu{width:800px;}
      in your theme stylesheet.

    1. shailan says:

      Thanks Mohammed.