## Breadcrumb Navigation

Example 7.8 - Nested lists for 'breadcrumb' navigation - Example 7.8 (Without Styles)<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;
    }