I have a problem when I'm using .click() and .hover() in combination with toggle.

I have a "menu" which should be opened/closed on hover, but can also be closed/reopened on click. But if I'm opening the menu with hover and then close it with a click, it opens again If i stop hovering it.

Here's my code ([jsfiddle](http://jsfiddle.net/tsLwLdkj/1/))

HTML

```
<ul>
<li><span>Click Me</span>
    <ul>
        <li><a href="#">Option 1</a></li>
        <li><a href="#">Option 1</a></li>
        <li><a href="#">Option 1</a></li>
    </ul>
</li>
</ul>

```

JS

```
$(function() {
    $("ul").hover(function() {
        $(this).find('ul').toggle();
    });
    $("ul").click(function() {
       $(this).find('ul').toggle();
    });
});

```

CSS

```
ul{
    margin: 0;
    padding: 0;
    border: 1px solid black;
    position: relative;
}

li{
    list-style-type: none;
}

ul ul{
    display: none;
    position: absolute;
    width: 100%;
    left: -1px;
}

span{
    display: block;
    padding: 5px;
    background-color: #eeeeee;
}

a{
    background-color: #eee;
    display: block;
    padding: 5px;
}

a:hover{
    background-color: white;
}

```

I know what the problem is, but I don't know how to fix it. I hope someone has a solution.