jQuery Help - Appear underneath rather than on top
<p>I have the following jQuery which I need adapting:</p>

<pre><code>$(document).ready(function(){

$(".rss-popup a").hover(function() {
$(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow");
}, function() {
$(this).next("em").animate({opacity: "hide", top: "-70"}, "fast");
});

});
</code></pre>

<p>CSS: </p>

<pre><code>.rss-popup {
margin: 100px auto;
padding: 0;
width: 100px;
position: relative;
}

div.rss-popup em {
background: url(../images/rssbuttonbubble.png) no-repeat;
width: 100px;
height: 49px;
position: absolute;
top: -70px;
left: -0px;
text-align: center;
text-indent: -9999px;
z-index: 2;
display: none;
}
#rss-icon {
width: 42px;
height: 42px;
background: url(../images/rssbutton.png) no-repeat 0 0;
text-indent: -9999px;
margin: 0 auto;
display: block;
}
</code></pre>

<p>The HTML: </p>

<pre><code>&lt;div class="rss-popup"&gt;
&lt;a href="feed-link" id="rss-icon"&gt;RSS Feed&lt;/a&gt;
&lt;em&gt;Subscribe to our RSS Feed&lt;/em&gt;
&lt;/div&gt;
</code></pre>

<p>I want to make the <code>rssbuttonbubble.png</code> appear underneath rather then from above, can any make any suggestions as to how I can achieve this?</p>
