Tutorial: Create your very own dropdown menu stylesheet

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.

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!