How to Make an Image Drop-Down Menu in CSS

by Ruri Ranbe

Before the development of Cascading Style Sheets, Web designers used a combination of Hypertext Markup Language and JavaScript to create drop-down menus. For about a decade, "<select>" tags were used to add navigational menus to sites, but most designers now use the UL, or unordered list, element. Most UL elements use text, but you can combine HTML and CSS to create a drop-down menu that uses images instead.

1

Insert the "<ul>" and "</ul>" tags between the "<body>" and "</body>" tags in the HTML document:

<body> <ul> </ul> </body>

2

Insert "<li>" and "<li>" between the "<ul>" tags to create the main menu. Insert the "<img>" tag between the "<li>" tags.

<ul> <li><img src="URL" alt="header a"></li> <li><img src="URL" alt="header b"></li> </ul>

Replace "URL" with the full address linking to the menu images. Use the same formatting, "<li><img></li>", to add additional items to the menu. Replace the text in the "alt" field with a description for each picture.

3

Insert the "<ul>" and "<li>" tags between the existing "<li>" tags to add sub-menus. For example:

<ul> <li><img src="URL" alt="header a"> <ul> <li><img src="URL" alt="sub-item a"></li> </ul> </li> <li><img src="URL" alt="header b"> <ul> <li><img src="URL" alt="sub-item b"></li> <li><img src="URL" alt="sub-item c"></li> </ul> </li> </ul>

Insert the correct images for the sub-menus using the same procedure used for the main menu. Replace the "alt" fields with the pictures' descriptions.

4

Add the "<a>" tag to each "<li>" element to link the menu items to a specific page on the website. For example:

<li><a href="page.html"><img src="URL" alt="sub-item a"></a></li>

Replace "page.html" with the address linking to the correct Web document.

5

Insert the "<style>" tags to the document header:

<head> <style> </style> </head>

6

Add the following between the "<style>" tags to format the "<ul>" and "<li>" tags:

li { list-style-type: none; }

ul li { float: left; width: #px; }

Replace "#" with the width of the largest image in pixels.

7

Insert the following code between the "<style>" tags, following the "ul li" element, to convert the menu to a drop-down menu:

ul li ul { visibility: hidden; }

ul li:hover ul { visibility: visible; display: inline; }

Tip

  • check If you don't want the top menu items to link to another page on the website, insert "#" into the "href" field instead.

About the Author

Ruri Ranbe has been working as a writer since 2008. She received an A.A. in English literature from Valencia College and is completing a B.S. in computer science at the University of Central Florida. Ranbe also has more than six years of professional information-technology experience, specializing in computer architecture, operating systems, networking, server administration, virtualization and Web design.