This is a full width menu with equal space, using flexbox, no support below IE10.
A Pen by Michael Fasani on CodePen.
<link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'> | |
<nav> | |
<ul class="grey-tabs"> | |
<li><a href='#'>We are all different</a></li> | |
<li><a href='#'>in size</a></li> | |
<li><a href='#'>to our brothers and</a></li> | |
<li><a href='#'>sisters</a></li> | |
<li><a href='#'>yet we all look great</a></li> | |
<li><a href='#'>(even in IE10)</a></li> | |
</ul> | |
</nav> |
* { | |
padding: 0; | |
margin: 0; | |
outline: 0; | |
} | |
nav { | |
padding: 20px; | |
} | |
.grey-tabs { | |
font-family: 'Abel', sans-serif; | |
font-weight: bold; | |
font-size: 20px; | |
width: 100%; | |
list-style: none; | |
display: -ms-flexbox; | |
-ms-flex-direction: row; | |
display: -moz-box; | |
display: -webkit-box; | |
display: box; | |
border-left: 1px #bbbbbb solid; | |
border-top: 1px #bbbbbb solid; | |
border-bottom: 1px #bbbbbb solid; | |
box-shadow: 0px 1px 1px #d6d6d6; | |
} | |
.grey-tabs li { | |
text-align: center; | |
-ms-flex: 1; | |
-webkit-box-flex: 1; | |
-moz-box-flex: 1; | |
box-flex: 1; | |
} | |
.grey-tabs li a { | |
border-bottom: 1px #ffffff solid; | |
border-right: 1px #bbbbbb solid; | |
border-left: 1px #ffffff solid; | |
text-shadow: 0px 1px #fff; | |
text-decoration: none; | |
text-transform: uppercase; | |
color: #707070; | |
display: block; | |
padding: 10px 0; | |
background: #ffffff; | |
background: -moz-linear-gradient(top, #ffffff 0%, #e9e9e9 50%, #e1e1e1 51%, #e5e5e5 100%); | |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#e9e9e9), color-stop(51%,#e1e1e1), color-stop(100%,#e5e5e5)); | |
background: -webkit-linear-gradient(top, #ffffff 0%,#e9e9e9 50%,#e1e1e1 51%,#e5e5e5 100%); | |
background: -o-linear-gradient(top, #ffffff 0%,#e9e9e9 50%,#e1e1e1 51%,#e5e5e5 100%); | |
background: -ms-linear-gradient(top, #ffffff 0%,#e9e9e9 50%,#e1e1e1 51%,#e5e5e5 100%); | |
background: linear-gradient(to bottom, #ffffff 0%,#e9e9e9 50%,#e1e1e1 51%,#e5e5e5 100%); | |
} | |
.grey-tabs li a:hover { | |
border-bottom: 1px #656565 solid; | |
border-left: 1px #828282 solid; | |
color: #fff; | |
text-shadow: 0px -1px #000; | |
background: #989898; | |
background: -moz-linear-gradient(top, #989898 0%, #828282 50%, #656565 51%, #656565 100%); | |
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#989898), color-stop(50%,#828282), color-stop(51%,#656565), color-stop(100%,#656565)); | |
background: -webkit-linear-gradient(top, #989898 0%,#828282 50%,#656565 51%,#656565 100%); | |
background: -o-linear-gradient(top, #989898 0%,#828282 50%,#656565 51%,#656565 100%); | |
background: -ms-linear-gradient(top, #989898 0%,#828282 50%,#656565 51%,#656565 100%); | |
background: linear-gradient(to bottom, #989898 0%,#828282 50%,#656565 51%,#656565 100%); | |
} |