ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-bottom: 4px solid #ffff3b;
    border-radius: 10px;
    background-image: linear-gradient(to bottom right, #E8E8E8, #f2f2f2, #E8E8E8);
    display:table;
    width: 100%;
}

li {
    float: none;
    display: table-cell;
    text-align: center;
}

    li a {
        display: block;
        color: #666;
        text-align: center;
        padding: 3px;
        text-decoration: none;
        font-size: 20px;
        border-radius: 15px;        
    }

        li a:hover:not(.active) {
            background-color: #ddd;
            text-decoration: none;
        }

        li a.active {
            color: white;
            background-color: #4CAF50;
            text-shadow: 2px 2px green;
            text-decoration: none;
        }