Apple-Like Navigation

HTML

<nav>
<ul>
    <li><a href="#">Store</a></li>
    <li><a href="#">Mac</a></li>
    <li><a href="#">iPod</a></li>
    <li><a href="#">iPhone</a></li>
    <li><a href="#">iPad</a></li>
    <li><a href="#">iPhone</a></li>
</ul>

</nav>

CSS

nav {
    display: -webkit-flexbox;
    display: -moz-flexbox;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    background: #777;
    margin: 10px;
    border: 1px solid #707070;
    border-bottom-color: #444;
    box-shadow: 0 2px 2px rgba(0,0,0,.2);
    border-radius: 4px;
}
ul {
    display: -webkit-flexbox;
    display: -moz-flexbox;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    width: -webkit-flex(1);
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-box-flex: 1;
}
li {
    text-align: center;
    width: -webkit-flex(1);
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-box-flex: 1;
}
li a {
    display: block;
    padding: 9px 0;
    border-left: 1px solid #555;
    box-shadow: inset 0 17px 1px 0 rgba(255,255,255,.2);
    color: #fff;
    text-decoration: none;
    font: .9em sans-serif;
    text-shadow: 0 -1px 0 #333;
}
li a:visited { color: #fff; }
li a:hover {
    background: #444;
    box-shadow: inset 0 17px 1px 0 rgba(255,255,255,.05);
}
li:first-child a { border-left: 0; }