Small navigation responsive menu

Cool Small Menu With Different Colors Combination

<div class="wrap">
    <nav class="menu">
        <ul>
            <li><a href="http://www.jquery2dotnet.com">Home</a> </li>
            <li><a href="http://www.jquery2dotnet.com">About me</a> </li>
            <li><a href="http://www.jquery2dotnet.com">Contact</a> </li>
        </ul>
    </nav>
    <nav class="menu green">
        <ul>
            <li><a href="http://www.jquery2dotnet.com">Home</a> </li>
            <li><a href="http://www.jquery2dotnet.com">About me</a> </li>
            <li><a href="http://www.jquery2dotnet.com">Contact</a> </li>
        </ul>
    </nav>
    <nav class="menu blue">
        <ul>
            <li><a href="http://www.jquery2dotnet.com">Home</a> </li>
            <li><a href="http://www.jquery2dotnet.com">About me</a> </li>
            <li><a href="http://www.jquery2dotnet.com">Contact</a> </li>
        </ul>
    </nav>
    <nav class="menu purple">
        <ul>
            <li><a href="http://www.jquery2dotnet.com">Home</a> </li>
            <li><a href="http://www.jquery2dotnet.com">About me</a> </li>
            <li><a href="http://www.jquery2dotnet.com">Contact</a> </li>
        </ul>
    </nav>
    <nav class="menu dark">
        <ul>
            <li><a href="http://www.jquery2dotnet.com">Home</a> </li>
            <li><a href="http://www.jquery2dotnet.com">About me</a> </li>
            <li><a href="http://www.jquery2dotnet.com">Contact</a> </li>
        </ul>
    </nav>
</div>

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,800,700,600,300);
body{font-family:'Open Sans' , sans-serif;background:#eee;margin:0}
.wrap{width:950px;margin:25px auto}
nav.menu{ margin-top:10px }
nav.menu ul{overflow:hidden;float:left;width:650px;list-style:none;color:#fff;background:#1abc9c;-webkit-box-shadow:1px 1px 1px 0 rgba(204,204,204,0.55);-moz-box-shadow:1px 1px 1px 0 rgba(204,204,204,0.55);box-shadow:1px 1px 1px 0 rgba(204,204,204,0.55);margin:0;padding:0}
nav.menu.green ul{background:#2ecc71}
nav.menu.blue ul{background:#3498db}
nav.menu.purple ul{background:#9b59b6}
nav.menu.dark ul{background:#34495e}
nav.menu ul li{float:left;margin:0}
nav.menu ul a{display:block;font-size:16px;font-weight:600;text-transform:uppercase;color:#fff;text-decoration:none;transition:all .5s ease;padding:25px}
nav.menu ul a:hover{background:#16a085;text-decoration:underline}
nav.menu.green ul a:hover{background:#27ae60;}
nav.menu.blue ul a:hover{background:#2980b9;}
nav.menu.purple ul a:hover{background:#8e44ad;}
nav.menu.dark ul a:hover{background:#2c3e50;}

@media screen and (max-width: 960px)
{

.wrap{width:90%;margin:25px auto}
nav.menu ul{width:100%;float:inherit}
nav.menu ul li{float:inherit;margin:0}
nav.menu ul a{font-size:16px;border-bottom:1px solid #16a085;border-top:1px solid #16a085;padding:15px}
nav.menu.green ul a{border-bottom:1px solid #27ae60;border-top:1px solid #27ae60}
nav.menu.blue ul a{border-bottom:1px solid #2980b9;border-top:1px solid #2980b9}
nav.menu.purple ul a{border-bottom:1px solid #8e44ad;border-top:1px solid #8e44ad}
nav.menu.dark ul a{border-bottom:1px solid #2c3e50;border-top:1px solid #2c3e50}

}

@media screen and (max-width: 460px)
{
    nav.menu ul a{font-size:14px;padding:15px}
}

DEMO