Met een één pixel achtergrond afbeelding kan je vele dingen doen, met repeat-x maak je een horizontale lijn, repeat-y maakt een vertikale lijn en met repeat kan je een vlak vullen met kleur. Hoe kunnen we dit nu combineren voor onze sitemap styling? :

HTML

<ul id="project-list">
 <li><a href="#">Civil Engineering</a>
  <ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">Home Office</a></li>
   <li><a href="#">First Addition</a></li>
   <li><a href="#">Contact</a>
    <ul>
     <li><a href="#">Main office</a></li>
     <li><a href="#">Sister office</a></li>
    </ul>
   </li>
   <li><a href="#">Metropolitan Place Phase II</a></li>
   <li><a href="#">Oak Park Place of Baraboo</a></li>
   <li><a href="#">Premier Coop</a></li>
   <li><a href="#">Sleep Inn & Suites</a></li>
   <li><a href="#">Tradewinds Business Center</a></li>
   <li><a href="#">UW-Madison Nielsen Tennis Stadium</a></li>
  </ul>
 </li>
 <li><a href="#">Environmental Engineering</a></li>
 <li><a href="#">About</a>
  <ul>
   <li><a href="#">This site</a></li>
   <li><a href="#">Office</a></li>
   <li><a href="#">Disclaimer</a></li>
   <li><a href="#">Person x</a></li>
   <li><a href="#">Person Y</a></li>
  </ul>
 </li>
</ul>

CSS

#project-list {
    background:transparent url(images/pixel.png) repeat-y 15px 0;
    width:340px;
}

#project-list li {
    font-size:16px;
    margin:15px 0 20px;
    padding:0 0 0 10px;
}

#project-list li a {
    background:white;
    color:#1F6DD9;
    display:block;
    padding:3px;
}

#project-list li a:hover {
    color:#84B8FF;
}

#project-list li ul li {
    background:transparent url(images/pixel.png) repeat-x 0 8px;
    font-size:13px;
    margin:4px 0 4px 5px;
    padding:0 0 0 20px;
}

#project-list li ul li a {
    padding:0 0 0 3px;
}

#project-list li ul li ul {
    background:transparent url(images/pixel.png) repeat-y 15px 0;
    margin-bottom:10px;
}

#project-list li ul li ul li {
    margin-left:16px;
    padding-left:10px;
}