WordPress Navigation- Dropdown Menu Image

Having updated my theme to make use of the WordPress navigation menus I decided I wanted to have an indicator to display that there is a drop-down menu. This can be done many ways with plugins etc but I wanted to do it without the need for a plugin. So I had a think and came up with this idea which requires very little knowledge to carry out.

Create a Image for your drop-down navigation

To start this tutorial off we need a image. The source files are available to download at the bottom of this post. I used Inkscape which I used for this particular project but you can use any other software. I first created a triangle and then I scaled it down to 15px by 8px. I placed the triangle hard to the left and left some space to the right. This stops the image from being pushed to the edge of the container which improves it’s appearance and prevents us from adding any padding to our CSS which may destroy the look.

Enable Hidden Options

Go to the WordPress admin and click on Appearance and then click on the Menus.

Go to Screen Options and check the CSS Classes checkbox.

Back in the menu section in my case I have Tutorials as a parent and the children are Windows, PHP and Linux.

Expand tutorials by clicking on it and type drop-down into the CSS classes input box. Save your menu!

Add the CSS

We of course now need add a few lines to your stylesheet. Open style.css in your favourite editor and enter the following

li.drop-down a
{
 background:url(images/down_arrow_8.png) no-repeat center right;
}

If you refresh your browser you may see that multiple images are being displayed like so.

To prevent this we add the following to the stylesheet.

#menu-navbar .sub-menu .menu-item a  , #menu-navbar .sub-menu .menu-item a:visited 
{
    background-image: none;
}

Conclusion

As you can see with the above image the extra images have disappeared. Hope you have enjoyed this simple tutorial and please feel free to contact me if you are experiencing any problems as not all navigation menus are the same so there may be a little tweaking required.

Download