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

Tutorial: Create your very own dropdown menu stylesheet

on April 4, 2010

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!

ADVERTISEMENT
ADVERTISEMENT

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