Over at the Web Builder Zone I started a series of beginners articles centered around HTML and CSS a while back.

  1. How and When to Use Links in HTML Pages
  2. How and when to use links in HTML pages - Part 2
  3. The conclusion - How and when to use links in HTML pages - Part 3
  4. HTML and CSS List Based Menus

The latest article in this series was published yesterday: CSS And HTML Two Level Menus Take One

This article will continue from where I left of with HTML and CSS List Based Menus. For a lot of websites having a menu such as the one we built in the previous article will completely fulfill the needs of the website owner and it’s users, however for some sites, such as the zones on DZone, there is a definite need for a second level of navigation. These second level elements also needs to be instantly accessible to the website users in the same manner as it’s one level counterpart. That is then the topic of this article, creating drop-down and fly-out menu’s using cascading style sheets (CSS) and semantically coded HyperText Markup Language (HTML). While in this article we will focus on HTML and CSS in part two we will also look at how to encourage Internet Explorer 6, and below, to play along with a sprinkling of JavaScript to overcome it’s limitation of only acknowledging :link, :hover and the rest of the CSS link styles when applied to <a> tags and not any other HTML element. We will also look at the quirks presented by the various browsers and how to overcome them.

First let’s look at the HTML that we ended up with at the end of the last article as we will be using it as the basis of this article. Read the complete article on the Web Builder Zone