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.

Step 1

Code your menu in HTML using the "

    " and "
  • " tags:

    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.

Step 2

Add your submenu as a new unordered list nested within its parent link's "

  • " tags:

  • Step 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.

    Step 4

    Add a background color to your menu bar:

    menu {

    list-style: none;

    padding: 0;

    background-color: darkblue;


    Step 5

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

    menu li {

    float: left;


    Step 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.

    Step 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;


    Step 8

    Remove the left floats from the items in the submenus:

    menu ul li {

    clear: left;


    Step 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;


    Step 10

    Add the "clear fix" rule to your div:

    .clearfix {

    clear: both;