Active navigation will have the different appearance to make user understand, where they are. Lets create the active menu like in below image. Active menu has bottom centre down arrow. Lets see how to using css3 :after pseudo create.

HTML markup to create basic navigation menu!

<ul>
    <li class="current">Home</li>
    <li>About</li>
    <li>Blog</li>
    <li>Contact</li>
</ul>

CSS3 to create the active down arrow menu

ul{
    list-style:none;
}
li{
    display:block;
    float:left;
    margin-right:10px;
    background-color:red;
    padding:10px;
    position: relative;
}
li.current{
    background-color:#78c4dd;
}
li.current:after{
    border-left: 10px solid transparent;
    border-right: 11px solid transparent; content:"";
	border-top: 13px solid #78c4dd;
    position: absolute;
    bottom: -13px;
    width: 0px;
    left: 50%;
    margin-left: -10px;
}

JSFiddle example:

Thanks to contributor Mikedidthis. Hope this will help some one