jQuery and CSS Pop-up Menu Link Issue

I am in the process of developing a bottom-bar menu using CSS and jQuery. It is essentially a persistent menu that gives users quick access to different features of the site.

The bar consists of small icons (class "menu-item"), that when hovered over reveal a small contextual menu with multiple options. Options inside this div are to be clickable, but the image icon itself should also be linkable.

The html is structured as follows, where the CSS for #profile specifies a particular image for the button.

<div id="profile" class="menu-item">
    <div id="profile-tip" class="tip tip-submenu">
    <div class="tip-profile">--Profile Content--</div>
    </div> 
</div>

When the image is hovered over, the "profiles-tip" div becomes visible, which is achieved using the following javascript

$(".menu-item").hover(function() {
    $(this).find("div").fadeIn("fast").show(); //add 'show()'' for IE
$(this).mouseleave(function () { //hide tooltip whe开发者_如何学Pythonn the mouse moves off of the element
    $(this).find("div").hide();
});
});

In a nutshell, I want the profiles icon to be clickable and say, link to page "profiles.php". I thought this could be easily achieved by applying the following:

<div id="profile" class="menu-item" onClick="window.location.href='profiles.php'">
    <div id="profile-tip" class="tip tip-submenu">
    <div class="tip-profile">--Profile Content--</div>
    </div> 
</div>

When this solution is applied, it causes any clicks made in the pop-up menu (ie. not on the icon itself) to also link to the same location.

Many thanks if you can decipher the above and provide some help. Willing to provide more information where necessary.

---

I cooked up something for you here: http://jsfiddle.net/qstv9/

Try it :-)