Menubar springt zur Seite bei mouse over

[allby]

Hi leute, hab folgendes problem.
ich habe auf meine seite ein neues menu bar installiert, der leider zur seite springt, wenn man mit der maus über ihn fährt.

hier ist meine seite: Wordpress free Templates

hier der html code:

<div id='topbar'>
<a class='active' href='p1.html'><span>Home</span></a>
<a href='p2.html'><span>News</span></a>
<a href='p3.html'><span>Video</span></a>
<a href='p4.html'><span>Images</span></a>
</div>

und hier der css code:

#topbar{
font-size:14px;
color:#3b5d14;
background:#b2d281;
font-weight:bold;
padding:6px;
overflow:auto;
height:1%;
clear:both;
}
#topbar a{
color:#3b5d14;
text-decoration:none;
margin:0 10px;
height:23px;
line-height:23px;
float:left;
display:block;
}
#topbar a.active{
height:23px;
line-height:23px;
background:url([URL]http://i39.tinypic.com/flv79k.png[/URL]) right top no-repeat;
padding-right:10px;
}
#topbar a.active span{
background:url([URL]http://i40.tinypic.com/2yoz902.png[/URL]) left top no-repeat;
height:23px;
display:block;
padding-left:10px;
}
#topbar a:hover {
height:23px;
line-height:23px;
background:url([URL]http://i39.tinypic.com/flv79k.png[/URL]) right top no-repeat;
padding-right:10px;
}
#topbar a:hover span{
background:url([URL]http://i40.tinypic.com/2yoz902.png[/URL]) left top no-repeat;
height:23px;
display:block;
padding-left:10px;
}

 

[Maxi]

Es leigt dran, dass die Grafiken beim Hover breiter sind wie die normalen Links, wenn du nicht mit der Maus drüber fährst.

Also einen anderen Hover ohne diese Grafiken her, und dein Problem ist gelöst.

 

[Bernhard]

Hallo allby,

Maxi hat Recht, aber Du kannst bei dem Hover bleiben. Es fehlt lediglich:

#topbar a{
padding-right:10px;
}
#topbar a span{
height:23px;
display:block;
padding-left:10px;
}

wobei sich das dann noch etwas schlanker schreiben ließe...


Grüße
Bernhard