jQuery切换菜单和jQuery显示和隐藏翻转

Question

I am working on a navigation and have a couple of issues with Jquery.

1) When hovered on the image on the right hand side of the menu the dropdown menu needs to be displayed only when hovered over the right image.

2) when you make the screen less than 800px it will show a drop down menu. I want the menu to toggle up and down smoothly using the red button

Can anybody assist?

http://jsfiddle.net/558pA/1/

/*  MAIN MENU DROPDOWN
===================================*/
$(".toggle-nav").click(function () {
    $("#nav").slideToggle('slow');
});

/*  MAIN SETTINGS SHOW AND HIDE
===================================*/

('.user-profile').hover(

function () {
    $(this).show();
},

function () {
    $(this).hide();
});

Answer 1

Change $(".toggle-nav") to $("#toggle-nav") , and add a # to the href:

<a href="#" id="toggle-nav">Toggle navigation</a>

...

$("#toggle-nav").click(function () {
    $("#nav").slideToggle('slow');
});

Woking demo: http://jsfiddle.net/n8zqS/