List

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. Below are two basic examples of how this can be done using the same unordered lists, but different CSS.

Code 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.

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.