jQuery Forum

hey, so this is a bit of a challenge for me. Basically I have a navigation list, floated off to the side with one li floating left.


What I want to do is be able to do a bounce effect when the user hovers, but the problem is when I do that, all the content beneath the ul moves too..(i.e. it bobbs up and down along with the list item..)

So what I want to do is replace each list item with an absolutely positioned clone.. problem for me is positioning it.. so far I'm thinking something like:

1. $(function(){
    var mag = $('.magic').clone(); //clone list item
   mag.removeClass('magic').addClass('magic2'); //swap the float left  for absolute..
   
2. //inserting it here with the correct left positioning is my problem, as the floated element has no left position that I know of..
   });
   
3. 
   
4. 
   
5. 
   
6. 
   
7. 
   
8. HTML  
   
9. 
   
10. ...<ul>
    <li class="magic">
    <p>div magic</p>
    
    
    </li>
    </ul>....
11. 
    
12. 
    
13. 
    
14. CSS
15. 
    
16. ...
    
17. .magic{
        background: url(images/navigationbg_03.png) no-repeat 0 0;
        float:left;
        height: 50px;
        width: 123px;
        text-align:center;
        margin-right:25px;
        padding-top:10px;
    }
    
    .magic2{
        background: url(images/navigationbg_03.png) no-repeat 0 0;
        position:absolute
        height: 50px;
        width: 123px;
        text-align:center;
        margin-right:25px;
        padding-top:10px;
    }
    
    
    
    
    ul{float: right; list-style:none;}...
18.