crumbs structure
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#crumbs {
background-color: #eee;
padding: 4px;
}
#crumbs h3 {
display: none;
}
#crumbs ul {
display: inline;
padding-left: 0;
margin-left: 0;
}
#crumbs ul li {
display: inline;
}
#crumbs ul li a:link {
padding: .2em;
}
crumbs ul ul li{
background-image: url(arrow.gif);
background-repeat: no-repeat;
background-position: left;
padding-left: 12px;
}
</style>
</head>
<body>
<div id="crumbs">
<h3>Location:</h3>
<ul>
<li><a href="/">Home</a>
<ul>
<li><a href="/writing/">Writing</a>
<ul>
<li><a href="/writing/books/">Books</a>
<ul>
<li><a href="/writing/books/"></a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<hr />
<h1>Lorem ipsum dolor sit amet</h1>
<p>consectetuer adipiscing elit. Vivamus vitae ligula ut metus interdum accumsan. Vivamus commodo. Etiam eros massa, hendrerit hendrerit, ultricies facilisis, porttitor eget, magna. Fusce lacus ligula, dapibus sed, mattis id, tristique non, arcu. Vivamus feugiat. Etiam erat pede, posuere placerat, porttitor vitae, sollicitudin ut, tellus. Nunc volutpat velit blandit enim. Nulla luctus. In viverra nibh ac massa. Curabitur vel tellus a velit feugiat tristique. Mauris ultricies cursus diam. Nullam scelerisque blandit pede. Maecenas tellus velit, pellentesque placerat, tincidunt nec, tempus at, tellus. Quisque sapien. Nullam eget ante at mi consequat mattis. Nunc accumsan tincidunt ipsum. Sed adipiscing tincidunt lorem. Mauris arcu. Vestibulum laoreet augue.</p>
</body>
</html>
Related examples in the same category