Link + Div + Hover + Background - css

Question

I want to display menu points on my new homepage.
A menu point contains several elements -> Icon + Title + Description.
Those menu points should be links, so I just wrote a href in front of it.
It works, but it looks creepy, because it changes the background colour to grey. (Even if I declare it to white).
CSS
#font-face {
font-family: 'WebSymbolsRegular';
src: url('websymbols/websymbols-regular-webfont.eot');
src: url('websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('websymbols/websymbols-regular-webfont.woff') format('woff'),
url('websymbols/websymbols-regular-webfont.ttf') format('truetype'),
url('websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
font-weight: normal;
font-style: normal;
}
A { text-decoration: none; }
A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover { text-decoration: none; }
A:focus { outline: none; }
.menuePoint {
width: 300px;
height: 70px;
position: relative;
display: inline-block;
float: none;
overflow: hidden;
text-align: left;
background: #fff;
padding-left: 10px;
}
.menuePointIcon {
font-family: 'WebSymbolsRegular', cursive;
font-size: 20px;
float:left;
display:block;
text-shadow: 0px 0px 25px #0f76a6;
color: #0f76a6;
line-height: 66px;
width: 90px;
left: 0px;
text-align: center;
-webkit-transition: all 400ms linear;
-moz-transition: all 400ms linear;
-o-transition: all 400ms linear;
-ms-transition: all 400ms linear;
transition: all 400ms linear;
}
.menuePointTitle {
font-size: 25px;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
}
.menuePointDesc {
font-size: 18px;
color: #666;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.menuePoint:hover .menuePointTitle {
opacity: 1;
color:#2676ac;
-webkit-animation:menuePointTitleAnimation 2s;
}
.menuePoint:hover .menuePointDesc {
-webkit-animation:menuePointDescAnimation 2s;
}
.menuePoint:hover .menuePointIcon {
font-size: 35px;
color: #0f76a6;
text-shadow: 0px 0px 20px #0f76a6;
opacity: 1;
}
#-webkit-keyframes menuePointTitleAnimation /* Safari and Chrome */
{
from {
-webkit-transform: translateX(110%);
}
50% {
-webkit-transform: translateX(0%);
}
to {
-webkit-transform: translateX(0%);
}
}
#-webkit-keyframes menuePointDescAnimation /* Safari and Chrome */
{
from {
-webkit-transform: translateX(-110%);
}
50% {
-webkit-transform: translateX(0%);
}
to {
-webkit-transform: translateX(0%);
}
}
HTML
<div style="text-align: center;">
<div class="menuePoint">
<div class="menuePointIcon">A</div>
<div class="menuePointTitle">Test</div>
<div class="menuePointDesc">Test</div>
</div>
<div class="menuePoint">
<div class="menuePointIcon">B</div>
<div class="menuePointTitle">WiFi</div>
<div class="menuePointDesc">Educ</div>
</div>
<a href="#">
<div class="menuePoint">
<div class="menuePointIcon">C</div>
<div class="menuePointTitle">Kontakt</div>
<div class="menuePointDesc">Email / Jobs</div>
</div>
</a>
</div>

Answer 1

Try specifying a border-width: 0px.