สร้าง Sitemap ด้วย HTML+CSS

<ul>
  <li>Home
    <ul>
      <li>Product
          <ul>
            <li>Computer</li>
            <li>Printer</li>
            <li>Scanner</li>
          </ul>
      </li>
      <li>Client</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
  </li>
</ul>

/*change color*/
#usitemap a, #usitemap a:visited{color:#4D6180;background: #B5C7E3;border: 1px solid #4D6180;}
#usitemap a:hover, #usitemap a:active{background: #90ABD5;}
 
/*sitemap core*/
#usitemap *{margin: 0;padding: 0;}
#usitemap ul li{list-style: none;position: relative;top: 0px;width: 120px;padding: 10px 40px 0 0;background-image: url(fork_mid.gif);background-position: top left;background-repeat: no-repeat;}
#usitemap ul li:last-child{ background-image: url(fork_last.gif); }
#usitemap ul li:first-child{ background-image: url(fork.gif); }
#usitemap ul li:only-child{ background-image: url(dotted.gif); background-repeat: repeat-x;}
#usitemap ul li ul li{left: 172px;top: 0px;font-size: .9em;}
#usitemap ul li ul{margin-top: -42px}
#usitemap ul li a{text-align: center;display: block;line-height: 28px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;margin: 0 0px 0 50px;width: 120px;text-decoration: none;}