CSS only menu with li in full width

by LinkinTED

HTML

<ul>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
</ul>

CSS

ul {
    width: 90%;
    background: #222;
    margin: 0;
    padding: 10px;
    display: table;
    table-layout: fixed;
}
ul li {
    display: table-cell;
}
ul li a {
    display: block;
    background: #555;
    text-align: center;
    color: white;
    padding: 10px 0;
}
    ul li:nth-child(even) a {
        background: #888;
    }
    ul li a:hover {
        background: #fff;
        color: black;
    }