## Breadcrumb Navigation

Example 7.8 - Nested lists for 'breadcrumb' navigation - Example 7.8<nav id="breadcrumbf2"><ul><li><a href="#">Top</a></li><li><a href="#">Science</a></li><li><a href="#">Biology</a></li><li><a href="#">Genetics</a></li><li><a href="#">Genomics</a></li><li><span>Pharmacogenetics</span></li></ul></nav>/* Order of pseudo-"a" elements: LoVe HAte (Link, Visited, Hover, Active */ #breadcrumbf2 a:link, #breadcrumbf2 a:visited, #breadcrumbf2 a:hover, #breadcrumbf2 a:active, #breadcrumbf2 li span { color: navy; font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: small; font-weight: normal; text-decoration: none; } #breadcrumbf2 li::after { content: " \279E "; } #breadcrumbf2 li:last-child::after { content: ""; } #breadcrumbf2 a:hover { text-decoration: underline; } #breadcrumbf2 li span { color: black; } #breadcrumbf2 ul { background-color: #ddd; padding-left: 0px; margin-left: 0px; } #breadcrumbf2 ul li { display: inline; }

- Markup
- Style

     <nav id="breadcrumbf2">
       <ul>
         <li>
           <a href="#">Top       </a>
         </li>
         <li>
           <a href="#">Science       </a>
         </li>
         <li>
           <a href="#">Biology       </a>
         </li>
         <li>
           <a href="#">Genetics       </a>
         </li>
         <li>
           <a href="#">Genomics       </a>
         </li>
         <li>
           <span>Pharmacogenetics       </span>
         </li>   </ul> </nav>

In `head` element:

    <link rel="stylesheet" href="example8.css"/>

In example8.css

    /*
        Order of pseudo-"a" elements:
        LoVe HAte (Link, Visited, Hover, Active
      */
       #breadcrumbf2 a:link, #breadcrumbf2 a:visited, #breadcrumbf2 a:hover, #breadcrumbf2 a:active, #breadcrumbf2 li span {
          color: navy;
          font-family: Tahoma, Arial, Helvetica, sans-serif;
          font-size: small;
          font-weight: normal;
          text-decoration: none;
      }
      #breadcrumbf2 li::after {
        content: "  \279E  ";
      }
      #breadcrumbf2 li:last-child::after {
        content: "";
      }
      #breadcrumbf2 a:hover {
          text-decoration: underline;
      }
      #breadcrumbf2 li span {
          color: black;
      }
      #breadcrumbf2 ul {
          background-color: #ddd;
          padding-left: 0px;
          margin-left: 0px;
      }
      #breadcrumbf2 ul li {
          display: inline;
      }