How to Create a Drop Down HTML Menu and Submenu

by Sara Williams

Drop-down menus -- also known as "suckerfish" menus -- use a combination of HTML and CSS (Cascading Style Sheets) for structure and style. The HTML part of a drop-down menu consists of bullet lists and nested bullet lists. After you style the menu bar and main navigation links in CSS, you style the nested bullet lists as submenus. The ":hover" selector in CSS allows you to change a hidden submenu's display property to "block" to make it reappear.

1

Code your menu in HTML using the "<ul>" and "<li>" tags:

<ul id="menu">

<li><a href="link1.html">Link 1</a></li>

<li><a href="link2.html">Link 2</a></li>

<li><a href="link3.html">Link 3</a></li>

<div class="clearfix"></div>

</ul>

Add a clear-fix div before the end of the list. You will add a style to the "clearfix" class to make the menu's background stretch down.

2

Add your submenu as a new unordered list nested within its parent link's "<li>" tags:

<ul id="menu">

<li><a href="link1.html">Link 1</a></li>

<li><a href="link2.html">Link 2</a>

  &lt;ul&gt;

     &lt;li&gt;&lt;a href="link1.html"&gt;Link 1&lt;/a&gt;&lt;/li&gt;

     &lt;li&gt;&lt;a href="link2.html"&gt;Link 2&lt;/a&gt;&lt;/li&gt;

     &lt;li&gt;&lt;a href="link3.html"&gt;Link 3&lt;/a&gt;&lt;/li&gt;

</li>

<li><a href="link3.html">Link 3</a></li>

</ul>

3

Open your style sheet, and style your menu using CSS. Remove both the bullets and left-indent:

menu {

list-style: none;

padding: 0;

}

Note that "#menu" matches the ID name of the example HTML code.

4

Add a background color to your menu bar:

menu {

list-style: none;

padding: 0;

background-color: darkblue;

}

5

Float the menu items to the left so they line up horizontally on the menu bar:

menu li {

float: left;

}

6

Style the links that make up your menu items. Add padding to the links to line them up vertically on the menu bar while making them easier to click on and hover over. You must change the "display" property to "block" to add padding to links:

menu li a {

display: block;

padding: 8px 15px;

text-align: center;

color: white;

font-weight: bold;

text-decoration: none;

}

Note that in "padding," two values have been set. The first value is vertical padding while the second effects horizontal padding.

7

Style the submenu and its items. You first need to position the submenu. Remove the bullets and padding from the submenus as well:

menu ul {

position: absolute;

list-style: none;

padding: 0;

}

8

Remove the left floats from the items in the submenus:

menu ul li {

clear: left;

}

9

Add "dsiplay: none" to the "#menu ul" rule to turn off the submenu, since you do not want it to appear unless the user hovers over its parent item. Make the menu appear again using this code:

menu li:hover ul {

dipslay: block;

}

10

Add the "clear fix" rule to your div:

.clearfix {

clear: both;

}

Tips

  • check Add highlighting to your menu items when the user hovers over them. A style rule to change the background color of a hovered-over link looks like "#menu a:hover {}".
  • check Once you finish building your menu using HTML and CSS, you can add a jQuery plugin to make nice animations for the drop-downs.

References

About the Author

Sara Williams lives in western New York, where she is a freelance Web designer and content writer. She specializes in Web design, development and computer-hardware topics. Williams holds an Associate of Applied Science in computer information systems.