Link + Div + Hover + Background

[nurpiwitran]

I want to display menu points on my new homepage.A menu point contains several elements -> Icon + Title + DescriptionThose menu points should be links, so I just wrote a "a href" in front of it.It works, but it looks creepy, because it changes the background colour to grey. (Also if I declare it to white)CSS\[code\]@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%); }}\[/code\]HTML\[code\] <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="http://stackoverflow.com/questions/14594482/#"> <div class="menuePoint"> <div class="menuePointIcon">C</div> <div class="menuePointTitle">Kontakt</div> <div class="menuePointDesc">Email / Jobs</div> </div> </a> </div>\[/code\]here is a screenshot, that you know what i mean http://www.fotos-hochladen.net/view/problemk1zm7540qh.png