ISTA 230 Introduction to Web Design (Spring 2017)

Dropdown Menus

Screenshot of current website Screenshot of desired website

In an effort to provide users with quick and easy access to his website's content, Charlie Swan has created an extensive navigation list. That said, his navigation has become a little bit unwieldy and he would like to convert his existing list-based menu into a drop-down menu.

You have been hired to convert Charlie's navigation to a drop-down menu using your understanding of HMTL lists and CSS. All necessary files can be downloaded here. You are to perform the following tasks:

When using 'overflow:auto' to fix the float issue on dropdown menus, you'll often see a small scrollbar appear next to your menu:

Screenshot of current website

If this happens, the easiest way to get rid of it is to not use the 'overflow:auto' fix and instead set an explicit height (e.g., 30px); There are better alternative solutions that we'll discuss later in the semester but for now, this will do the trick.

This technique is a difficult one initially but will become more intuitive the more you practice it. It is recommended that you start by styling the parent list items first, followed by the nested lists. You'll want to use a combination of float properties, position properties, negative 'left' values, and the :hover pseudo-class to achieve the desired layout.

Solution

Solution can be downloaded here.