How to Make a Drop-down Menu With Two Columns

By Vail Joy

Drop-down menus have become a staple in Web design, providing a tidy way to present large amounts of navigation options in a compact horizontal or vertical space. There are several reasons you would want to break your drop-down lists into multiple columns. If your link lists are growing too long and obscuring other design elements, or if you want to add images or subcategory headings, multiple columns are a perfect solution. This technique can be implemented without the use of additional scripts, but it requires a basic understanding of HTML and CSS.

Step 1

Create a container for your menu using a DIV and give it a special class. For example:

The class of "menu" will be used to control how the container appears and to style the unordered list you will create next.

Step 2

Insert an unordered list (UL) between the DIV tags where "" is shown in the last example. The list should contain the main navigation links that, when clicked, will produce the drop-down menus. For example:

Notice that the second list item (LI) contains a comment indicating where your submenu should be inserted. Placing the submenu list inside your main link item's list tag will allow you to control its visibility and break it into columns.

Step 3

Replace the "" comment with an unordered list containing your submenu links. For example:

Step 4

Add styles to your style sheet for the "menu" class or insert them in your document head using "