Menu/Navigation

A menu or navigate is created with an unordered list or <ul> element.navigation
The content is wrapped  or nested in an anchor element or <a> tag.

The <a> element is unusual in that it can be in one of four different conditions – or pseudo classes – and we can define separate styles for each of these classes.

The four pseudo classes are:

  1.  a:link = unvisited link (default state)
  2. a:visited = previously visited link
  3. a:hover = link being moused over
  4. a:active = link being clicked

Anchor Pseudo-classes
A pseudo-class is used to define a special state of an element.
For example, it can be used to:

  • Style an element when a user mouses over it
  • Style visited and unvisited links differently

The syntax of pseudo-classes
syntax-pseudo-class
Links can be displayed in different ways:
anchor-pseudo

Example CSS Link Styling
css-links
warning-link

CSS for Horizontal Navigation/Menu

navigation
HTML markup for Navigation

CSS for Vertical Navigation/Menu

removes-bulletsvert-css

CSS for Horizontal Navigation/Menuremoves-bulletshoriz-css