CSSの:before疑似要素、:after疑似要素を使って作る簡単なパンくずリストです。現在位置（class="current"）までのルートを表示するタイプです。現在位置では文字色を変え、hoverしたときのリンクを無効、カーソルをデフォルトにしています。

 

サンプル01のhtmlソース

<ul>
	<li><a href="#">HOME</a></li>
	<li><a href="#">会社案内</a></li>
	<li><a href="#">業務実績一覧</a></li>
	<li><a class="current" href="#">2016年度</a></li>
</ul>

サンプル01のCSS（主要部分）ソース

.sample ul li:last-child {
	padding-right: 0px; 
	}
.sample ul li:last-child a:after,
.sample ul li:last-child a:before {
	display: none; 
	}
.sample ul a {
	font-size:13px;
	line-height: 1.4; 
	color: #222;
	height: 26px;
	display: inline-block;
	padding: 5px 20px 8px 10px;
	background: #bbb;
	text-decoration: none;
	position: relative; 
	}
.sample ul a.current {
	color:#25d;
	pointer-events: none;
	cursor: default;
	}
.sample ul a:before,
.sample ul a:after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	position: absolute;
	border-style: solid;
	top: 50%; 
	}
.sample ul a:before {
	border-width: 14px 0 14px 14px;
	border-color: transparent transparent transparent #FFF;
	right: 0;
	margin-top: -14px; 
	border-radius:5px;
	}
.sample ul a:after {
	border-color: #FFF transparent transparent transparent;
	right: 2px;
	margin-top: -14px;
	border-width: 14px 0 14px 14px;
	border-color: transparent transparent transparent #bbb; }
.sample ul a:hover {
	color:#666;
	text-decoration:underline;
	}