How would I move these two elements on the same line?

Here's my jsFiddle: http://jsfiddle.net/meltzerj/5XzMZ/

I want to modify this html/css so that the "?" is on the same line as the "Top Songs" link. More specifically, I want it to be right next to the "Top Songs"开发者_如何学JAVA text (to the right of it), inside of the highlighting when you hover over the links.

I'm having trouble figuring this out.

Am I picking you up wrong or is it as simple as moving the ? char into the anchor?

<a href="/videos" class="top_songs  chosen_home_option">Top Songs?</a>

Sorry if I am not getting it.

EDIT: Ok, its own element:

<li> <a style="float:left" href="/videos" class="top_songs  chosen_home_option">Top Songs <span style="">?</span></a>  </l

i>

or perhaps

<li> <div class="chosen_home_option"> <a href="/videos" class="top_songs">Top Songs</a> <span style="">?</span> </div></li>

and change the css

a.top_songs, a.upvoted_songs, a.feed_display, a.find_friends, li.notifications {

    padding-left:15px;
    margin-top:2px;
    border-top-left-radius: 15px 15px;
    border-bottom-left-radius: 15px 15px;
    color:black;
}