<ul id="navigation">
	<li>
		<a href="#">Patas</a>
		<div>
			<h3>Patas</h3>
			<div><img src="http://placekitten.com/320/240"></div>
		</div>
	</li>
	<li>
		<a href="#">Golden Snub-Nosed</a>
		<div>
			<h3>Golden Snub-Nosed</h3>
			<div><img src="http://placekitten.com/g/320/240"></div>
		</div>
	</li>
	<li>
		<a href="#">Duoc Langur</a>
		<div>
			<h3>Duoc Langur</h3>
			<div><img src="http://placekitten.com/320/240"></div>
		</div>
	</li>
	<li>
		<a href="#">Baby Pygmy Marmoset</a>
		<div>
			<h3>Baby Pygmy Marmoset</h3>
			<div><img src="http://placekitten.com/g/320/240"></div>
		</div>
	</li>
	<li>
		<a href="#">Black Lion Tamarin</a>
		<div>
			<h3>Black Lion Tamarin</h3>
			<div><img src="http://placekitten.com/320/240"></div>
		</div>
	</li>
	<li>
		<a href="#">Monk Saki</a>
		<div>
			<h3>Monk Saki</h3>
			<div><img src="http://placekitten.com/g/320/240"></div>
		</div>
	</li>
	<li>
		<a href="#">Gabon Talapoin</a>
		<div>
			<h3>Gabon</h3>
			<div><img src="http://placekitten.com/320/240"></div>
		</div>
	</li>
	<li>
		<a href="#">Grivet</a>
		<div>
			<h3>Grivet</h3>
			<div><img src="http://placekitten.com/g/320/240"></div>
		</div>
	</li>
	<li>
		<a href="#">Red Leaf</a>
		<div>
			<h3>Red Leaf</h3>
			<div><img src="http://placekitten.com/320/240"></div>
		</div>
	</li>
	<li>
		<a href="#">King Colobus</a>
		<div>
			<h3>King Colobus</h3>
			<div><img src="http://placekitten.com/g/320/240"></div>
		</div>
	</li>
</ul>

body {
	margin: 0;
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 10em;
}

ul li {
	position: relative;
}

ul li a {
	background-color: #EEE;
	display: block;
	padding: 1em;
}

ul li a + div {
	background: #CCC;
	clip: rect(0 0 0 0);
	position: absolute;
	left: 100%;
	top: 0;
	width: 320px;
}

li.active div {
	clip: auto;
}

img {
	height: 240px;
	width: 320px;
}

svg {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

(function () {
	document.addEventListener('DOMContentLoaded', function () {
		var
		inTriangle = false,
		navigation = document.getElementById('navigation'),
		x1, x2, x3, y1, y2, y3, link, timeout;

		navigation.addEventListener('mouseenter', onmouseenter);
		navigation.addEventListener('mouseleave', onmouseleave);

		function isInsideTriangle() {
			var
			b0 =  (x2 - x1) * (y3 - y1) - (x3 - x1) * (y2 - y1),
			b1 = ((x2 - x0) * (y3 - y0) - (x3 - x0) * (y2 - y0)) / b0,
			b2 = ((x3 - x0) * (y1 - y0) - (x1 - x0) * (y3 - y0)) / b0,
			b3 = ((x1 - x0) * (y2 - y0) - (x2 - x0) * (y1 - y0)) / b0;

			return b1 > 0 && b2 > 0 && b3 > 0;
		}

		function onmouseenter(event) {
			document.addEventListener('mousemove', onmousemove);
		}

		function onmouseleave(event) {
			document.removeEventListener('mousemove', onmousemove);
		}

		function onmousemove(event) {
			var
			// get nearest anchor
			linkNominee = event.target.closest('li');

			// set target coords
			x0 = event.clientX;
			y0 = event.clientY;

			if (!linkNominee) {
				clearTimeout(timeout);

				if (link && !link.contains(event.target)) {
					link.classList.remove('active');
					link = null;
				}

				return;
			}

			// conditionally set triangle’s left point
			if (linkNominee === link) {

				if (!isInsideTriangle()) {
					x1 = x0;
					y1 = y0;
				}
			} else if (linkNominee !== link) {
				// end if still inside another link’s triangle 
				if (link) {
					if (isInsideTriangle()) {
						clearTimeout(timeout);

						timeout = setTimeout(function () {
							if (link) {
								link.classList.remove('active');

								link = null;
							}

							onmousemove(event);
						}, 200);

						return;
					}

					link.classList.remove('active');
				}

				// set link
				link = linkNominee;

				var
				next = link.lastElementChild.getBoundingClientRect();

				// set triangle’s left point
				x1 = x0;
				y1 = y0;

				// set triangle’s top point
				x2 = next.left;
				y2 = next.top;

				// set triangle’s bottom point
				x3 = next.left;
				y3 = next.bottom;

				// set link state
				link.classList.add('active');
			}
		}
	});
})();