CSS rollover menu hopper med billeder
jeg har fået lavet en menu der hentes ud med css men når musen føres over et billedet bliver rollover billedet ustabilt.er der nogen der ved hvad jeg har lavet galt?
Her er link til min side:
http://playasmile.comze.com/eng/index.html
Her er CSS:
body {
font:16px "palatino linotype"
}
div.scroll {
height:445px;
width:650px;
overflow-x:hidden;
overflow-y:auto;
overflow:-moz-scrollbars-vertical
}
.trampoline {
background:url(images/z1.gif) no-repeat
}
.trampoline,.slide,.castle,.softplay,.pool,.offer,.eng,.thai,.home,.about,.safety,.contact,.sitemap,.event,.news,.sun,.logo,.blank,.blank1,.blank2,.blank3,.blank4,.blank5,.blank6,.blank7,.blank8,.blank9,.blank10,.blank11,.blank12 {
position:relative
}
.trampoline,.trampoline a,.slide,.slide a,.castle,.castle a,.blank10 {
width:173px
}
.trampoline,.trampoline a {
height:93px
}
.trampoline img,.slide img,.castle img,.softplay img,.pool img,.offer img,.eng img,.thai img,.home img,.about img,.safety img,.contact img,.sitemap img,.event img,.news img {
width:100%;
height:100%;
border:0
}
* html a:hover,* html a:hover,* html a:hover,* html a:hover,* html a:hover,* html a:hover,* html a:hover,* html a:hover,* html a:hover,* html a:hover,* html a:hover,* html a:hover,* html a:hover,* html a:hover,* html a:hover {
visibility:visible
}
.trampoline a:hover img,.slide a:hover img,.castle a:hover img,.softplay a:hover img,.pool a:hover img,.offer a:hover img,.eng a:hover img,.thai a:hover img,.home a:hover img,.about a:hover img,.safety a:hover img,.contact a:hover img,.sitemap a:hover img,.event a:hover img,.news a:hover img {
visibility:hidden
}
.trampoline span,.slide span,.castle span,.softplay span,.pool span,.offer span,.eng span,.thai span,.home span,.about span,.safety span,.contact span,.sitemap span,.event span,.news span {
position:absolute;
left:0;
top:0;
margin:0;
cursor:pointer
}
.slide {
background:url(images/z3.gif) no-repeat
}
.slide,.slide a {
height:65px
}
.castle {
background:url(images/z5.gif) no-repeat
}
.castle,.castle a {
height:98px
}
.softplay {
background:url(images/z2.gif) no-repeat
}
.softplay,.softplay a,.pool,.pool a,.blank,.blank1 {
width:174px
}
.softplay,.softplay a {
height:72px
}
.pool {
background:url(images/z4.gif) no-repeat
}
.pool,.pool a {
height:73px
}
.offer {
background:url(images/z6.gif) no-repeat
}
.offer,.offer a,.blank5 {
width:116px
}
.offer,.offer a {
height:77px
}
.eng {
background:url(images/z7.gif) no-repeat
}
.eng,.eng a {
width:43px
}
.eng,.eng a,.thai,.thai a {
height:46px
}
.thai {
background:url(images/z8.gif) no-repeat
}
.thai,.thai a {
width:41px
}
.home {
background:url(images/z9.gif) no-repeat
}
.home,.home a {
width:68px
}
.home,.home a,.about,.about a,.blank8 {
height:35px
}
.about {
background:url(images/z10.gif) no-repeat
}
.about,.about a {
width:119px
}
.safety {
background:url(images/z11.gif) no-repeat
}
.safety,.safety a {
width:137px
}
.safety,.safety a,.contact,.contact a {
height:51px
}
.contact {
background:url(images/z12.gif) no-repeat
}
.contact,.contact a {
width:126px
}
.sitemap {
background:url(images/z13.gif) no-repeat
}
.sitemap,.sitemap a {
width:99px
}
.sitemap,.sitemap a,.blank9 {
height:50px
}
.event {
background:url(images/z14.gif) no-repeat
}
.event,.event a {
width:86px;
height:56px
}
.news {
background:url(images/z15.gif) no-repeat
}
.news,.news a {
width:87px;
height:55px
}
.sun {
background:url(images/index_01.gif) no-repeat;
width:347px;
height:185px
}
.logo {
background:url(images/index_02.gif) no-repeat;
width:653px;
height:122px
}
.blank {
background:url(images/index_05.gif) no-repeat;
height:48px
}
.blank1 {
background:url(images/index_10.gif) no-repeat;
height:63px
}
.blank2 {
background:url(images/index_11.gif) no-repeat;
width:29px;
height:259px
}
.blank3 {
background:url(images/index_12.gif) no-repeat;
width:84px;
height:213px
}
.blank4 {
background:url(images/index_14.gif) no-repeat;
width:118px;
height:141px
}
.blank5 {
background:url(images/index_15.gif) no-repeat;
height:64px
}
.blank6 {
background:url(images/index_16.gif) no-repeat;
width:887px
}
.blank6,.blank10 {
height:31px
}
.blank7 {
background:url(images/index_21.gif) no-repeat;
width:89px;
height:86px
}
.blank8 {
background:url(images/index_24.gif) no-repeat;
width:394px
}
.blank9 {
background:url(images/index_30.gif) no-repeat;
width:219px
}
.blank10 {
background:url(images/index_33.gif) no-repeat
}
.blank11 {
background:url(images/index_20.gif) no-repeat;
width:44px;
height:87px
}
.blank12 {
background:url(images/index_28.gif) no-repeat;
width:318px;
height:1px
}
Her er udtræk til menu´en:
<div class="home"><a href="#"><img src="images/a9.gif" alt=""></a></div>