Create an Awesome Drop Down Menu for Your WordPress Blog Without Using Plugins

Plugins and Coding

WordPress - WordPress.Org

Plugins, of course, are always the easiest route to take. They require no coding knowledge and can be easily added to your WordPress blog with little effort. However, choosing to manually add elements to your blog will not only teach you more about coding, but also give you a better understanding of your site so that future modifications can be done easily.

There is one decent plugin out there that adds drop down menus to WordPress. It is the Suckerfish plugin. You can find out more info on that here.


Before we get started, take a look at some of these sites that are using mega drop down menus. You will notice that they are multi level, two tier drop downs with a high degree of flexibility and customization.

Food Network uses mega drop down menus

Newegg uses mega drop down menus

As you can see, the main difference between a mega drop down menu and a normal drop down menu is the multiple line list items and the high degree of customization. If you are looking to create just a simple drop down menu, this tutorial will work for you, you can just remove list items.

Create the List

The first thing that you will need to do is create the actual markup for your drop down menu. For this tutorial we will be using some very basic html incorporating unordered lists and list items. Below will be an example of what the list should look like. Change the item headings and paragraphs to fit your own needs.

<div id="dropmenu">

<ul id="menu">



<a href="#">Home</a>



<li class="megamenu">

<h2> <a href="#">Wine Selection</a> </h2>


<h3> Red Wine </h3>

<p> <a href="#">Merlot</a>, <a href="#">Bordeaux</a>, <a href="#">Chianti</a>, <a href="#">More Wines</a> </p>

<h3> White Wine </h3>

<p> <a href="#">Crystol</a>, <a href="#">Champagne</a>, <a href="#">More Wines</a> </p>

<h3> Wine Specials </h3>

<p> 20% off all bulk wine orders over $500 <a href="#">Check out our Specials</a> </p> </div> </li>

<li class="megamenu">

<h2> <a href="#">Beer Selection</a> </h2>

<div> <h3> American Beer </h3> <p> <a href="#">Miller</a>, <a href="#">Budweiser</a>, <a href="#">Bush</a>, <a href="#">Keystone</a>, <a href="#">More Beer</a> </p> <h3> Imported Beer </h3> <p> <a href="#">Corona</a>, <a href="#">Heinekens</a>, <a href="#">More Imported Beer</a> </p>

</div> </li>



Part 2

The above code will give you a mega menu with a home button, a wine button, and a beer button. The wine and beer buttons will feature drop down options in mega menu format. Be sure to check out part 2 to which will cover the CSS and JavaScript.


  •  Image Credit: WordPress Logo –
  • Suckerfish Plugin –

This post is part of the series: How To Add A Mega Drop Down Menu To Your WordPress Blog

This two part series tutorial will teach you how to add a basic drop down menu to WordPress using CSS, HTML, JavaScript, and jQuery.
  1. Creating a Mega Navigation Bar for WordPress
  2. How To Create A Mega Drop Down Menu For WordPress Part 2