displaying content in div depending on link hovered

When hovering over one of the links, the goal is to display the div specific to the link inside the browsebox.

How can this be done?

<div> 
<ul class="menu">
<li><a href="#">ARTISTS</a></li>
<li><a href="#">GENRES</a></li>
<li><a href="#">COLLECTIONS</a></开发者_开发问答li>
</ul>
<div id="browsebox">
<div class="artist"></div>
<div class="genre"></div>
<div class="collection"></div>
</div>
</div>

Each of the child divs for browsebox are hidden:

    $(document).ready(function(){
    $("#secondary-links li").mouseover(function(){
        $("#browsebox").slideDown(500, function(){
            $(this).addClass("shown");
            $(this).mouseleave( function() {
                $(this).fadeOut(200);
            });
        });
    });
}); 

EDIT: Forgot to mention that the divs that related to the links will have have links in it so the browsebox div will need to stay in hover state.

---

Here you go: http://jsfiddle.net/AlienWebguy/3WjF7/4/

HTML:

<div> 
    <ul class="menu">
        <li><a rel="artist" href="#">ARTISTS</a><div class="artist">Artist info here </div></li>
        <li><a rel="genre" href="#">GENRES</a><div class="genre">Genre info here</div></li>
        <li><a rel="collection" href="#">COLLECTIONS</a><div class="collection">Collection info here</div></li>
    </ul>
</div>

Example CSS:

li>a{
    display:block;
    width:100px;
}
li>div {
    height:200px;
    width:200px;
    background-color:#CCC;
    display:none;
}

JQuery:

$(function(){
    $('.menu li').mouseenter(function(){
        $(this).children('div').slideDown();
    });

    $('.menu li').mouseleave(function(){
        $(this).children('div').slideUp();
    });
});

---

First you need someway to link up those hrefs to corresponding divs. Something like this:

<a href="#" data-div="artist">ARTISTS</a>
<a href="#" data-div="genre">GENRES</a>
<a href="#"  data-div="collection">COLLECTIONS</a>

Then this:

$("ul.menu a").mousein(function() {
   $($(this).data("div")).show();
}).mouseout(function() {
   $($(this).data("div")).hide();
});