HTML lists styled as menus using CSS

Website menus are essentially lists of links and are therefore often coded as HTML lists and then styled using CSS to look the way they do. This is semantically correct by the way as a menu is literally a list of links. Below are two basic examples of how this can be done using the identical unordered lists coded in HTML, but with different CSS applied.

1. Common code

Code that is common to both examples:

• The CSS rule on the ul selector, list-style-type: none; removes the bullet symbol from the list.
• The CSS rule on the a selector, text-decoration: none; removes the default hyperlink underline format.

2. A list styled as a vertical menu

See the Pen HTML List horizontal menu by David Fox (@foxbeefly) on CodePen.

3. A list styled as a horizontal menu

See the Pen HTML List horizontal menu by David Fox (@foxbeefly) on CodePen.

4. Drop-down menu

Below is a slightly more advanced menu that includes dropdowns, but is still pure HTML & CSS.

See the Pen by David Fox (@foxbeefly) on CodePen.