navigation menu with nice jquery fadeIn fadeOut animations on button mouse over

I building navigation menu where each button will have two images - one transited into another one using jquery mouseenter and mouseleave events. Jquery part is sorted out and is not a problem. In each anchor I have two spans and only one is visible.

HTML I decided to go ahead with is as follows :

<div>
    <a href="#">
        <span id="span1">Button1</span>
        <span id="span2">Button1</span>
    </a>
    <a href="#">            
        <span id="span3">Button2</span>
        <span id="span4">Button2</span>   
    </a>
</div>

My problem is with css. I'm not able to style the buttons properly so Button1 is on the left of Button2. Cur开发者_开发技巧rently all two buttons are displayed in the same space ( one on another ) so the last one is the only one visible.

Here is my css :

    #span1 { background-image:url('button1.png'); }
    #span2 { background-image:url('button1H.png'); }
    #span3 { background-image:url('button2.png'); }
    #span4 { background-image:url('button2H.png'); }

    span
    {
        background-repeat:no-repeat;                
        position:absolute;
        width:100px;
        height:50px;
        text-indent:-9000px;
        position: 0 0;
    }

    a
    {
        width:150px;
        float:left;
    }

Am I missing any css container? My point is to make each button 150px long. I want to have button 1 that is 150px long and then button 2 in the same line.

Thanks for your help!

1. you are using position: absolute for all your spans, which places them at 0 0 on the x and y axis. set different left positions for them.
2. use display: block for your spans, so they take a height and width.

try using this:

    #span1 { background-image:url('button1.png'); }
#span2 { background-image:url('button1H.png');  }
#span3 { background-image:url('button2.png'); left: 300px;}
#span4 { background-image:url('button2H.png'); left: 300px;}

span{ 
    background-repeat:no-repeat;  
    position:absolute;
    width:100px;
    height:50px;
    position: 0 0;
    display: block; 
    text-indent:-9000px;
}

see it here: http://jsfiddle.net/SebastianPataneMasuelli/L5guL/1/

Alternatively, you can ditch the position: absolute, and manipulate the second span, giving it a relative position and moving it to the left. This will let you float elements and avoid the absolute left positioning, which can become unwiedy as you have more links. example: http://jsfiddle.net/SebastianPataneMasuelli/L5guL/4/