HTML5 banner image.

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.

Using an HTML list for your menu is semantically correct.

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.

A list styled as a vertical menu

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


A list styled as a horizontal menu

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

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.

By MisterFoxOnline

CAT Educator

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.