We would like to know how to add triangle navigation hover effect to navbar.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
nav ul {<!--from w ww .j av a 2 s . c om-->
margin: 0;
padding: 0;
list-style: none;
}
nav li {
float: left;
width: 20%;
}
nav a {
display: block;
padding: 5px;
border-bottom: 1px solid black;
background: #fff;
color: #000;
font-weight: bold;
position: relative;
}
nav a:hover, .active {
background: #bbb;
}
nav a:hover:after {
content: "";
display: block;
border: 12px solid #bbb;
border-bottom-color: #000;
position: absolute;
bottom: 0px;
left: 50%;
margin-left: -12px;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#" class="active">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#">Link5</a></li>
</ul>
</nav>
</body>
</html>
The code above is rendered as follows: