CSS

/* Hover Effekt */
body {
padding: 0;
margin: 0;
}

ul {
width: 100%;
background: #ffffff;
margin: 0;
padding: 0;
text-align: center;
}

ul li {
display: inline-block;
margin: 0;
padding: 0;
width: 50px;
}

ul li a {
position: relative;
display: block;
padding: 25px 25px 25px 25px;
color: white;
text-decoration: none;
z-index: 1;
}

ul li a::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 0;
background-color: #ffecba;
transition: all 250ms;
-webkit-transition: all 250ms;
-moz-transition: all 250ms;
-o-transition: all 250ms;
-ms-transition: all 250ms;
z-index: -1;
}

ul li a:hover::before {
height: 100%;
}

/**************************/
/* Ein Licht geht auf! ROT */
.imageR {
background-color: #ffffff;
}
.imageR:hover {
background-color: #FF0000;
}

/* Ein Licht geht auf! BLAU */
.imageB {
background-color: #ffffff;
}
.imageB:hover {
background-color: #0093dd;
}

/* Ein Licht geht auf! GELB */
.imageG {
background-color: #ffffff;
}
.imageG:hover {
background-color: #eeee22;
}

/* Ein Licht geht auf! BRAUN */
.imageU {
background-color: #ffffff;
}
.imageU:hover {
background-color: #dd9933;
}