Desde el diseño v8 de CSS-Tricks.
Ver demostración
nav ( background: #444; border-bottom: 8px solid #E6E2DF; overflow: hidden; position: relative; width: 100%; ) nav:after ( content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: white; ) nav ul ( background: -moz-linear-gradient(left, #444 0%, #444 50%, #41d05f 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,#444), color-stop(50%,#444), color-stop(50%,#41d05f), color-stop(100%,#41d05f)); list-style: none; overflow: hidden; padding: 0 0 0 20px; width: 810px; ) nav li ( display: inline; ) nav a ( color: white; display: block; float: left; font-family: "myriad-pro-1","myriad-pro-2", HelveticaNeue, Helvetica, Arial, Sans-Serif; font-size: 22px; padding: 12px 0; text-decoration: none; text-align: center; width: 19%; -webkit-transition: width 0.12s ease; -moz-transition: width 0.12s ease; -o-transition: width 0.12s ease; transition: width 0.12s ease; ) nav a:hover ( color: white; ) nav a:hover span ( border-bottom: 2px solid white; ) nav .a-home ( background: #ff8400; z-index: 100; position: relative; ) nav .a-forums ( background: #e42b2b; ) nav .a-videos ( background: #a800ff; ) nav .a-downloads ( background: #49a7f3; ) nav .a-snippets ( background: #41d05f; ) .home nav ( border-bottom-color: #ff8400; ) .forums nav ( border-bottom-color: #e42b2b; ) .videos nav ( border-bottom-color: #a800ff; ) .downloads nav ( border-bottom-color: #49a7f3; ) .snippets nav ( border-bottom-color: #41d05f; ) nav li:hover a ( width: 24%; ) nav ul:hover .active ( width: 19%; ) nav ul:hover .active:hover ( width: 24%; ) nav li a.active ( width: 24%; )
