<ul id="menu">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Company</a></li>
    <li><a href="#">Contact</a></li>
</ul>
View Compiled
#menu {
    border-bottom: 3px solid #36c5af;
    list-style: none;
    display: inline-block;
    padding: 0;
}

    #menu li {
        float: left;
        position: relative;
    }

        #menu li a {
            text-decoration: none;
            color: #333;
            padding: 18px 25px 12px 25px;
            line-height: 35px;
        }

    #menu > li.active > a:after, #menu > li > a:hover:after {
        background: #ff6a00;
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: -1;
        width: 100%;
        height: 120%;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        content: "";
        transform: perspective(5px) rotateX(2deg);
        transform-origin: bottom;
    }

    #menu li.active a, #menu li a:hover {
        color: #FFF;
    }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.