The primary list has three entries. This is actually a multilayer list.

The top level indicates categories, not necessarily links. Each element in the top list has its own sublist. A second layer of links has various links in most elements.

The Web Development element has another layer of sublists. The general layout of this list entry corresponds to a complex hierarchy of information — like most complex websites.

The list validates to the HTML Strict standard. It's especially important to validate your code before adding CSS when it involves somewhat complex HTML code, like the multilevel list. A small problem in the HTML structure that may go unnoticed in a plain HTML document can cause all kinds of strange problems in your CSS.

Interior List appears on cue when mouse is over the parent element.

> symbol in li:hover > ul indicates direct relationship. It must be direct child, not grandchild.

Spreading out the lines by adding padding-top to li tag at the bottom of the style section.