.click en .hover samen?

[iforczz]

Hallo allemaal,

ik ben bezig met mijn website en heb het probleem dat ik van een div een knop heb gemaakt met het id "dropdown".
Daarin heb ik een div gemaakt wat het dropdown menu is met het id "dropdownMenu", hierin zitten ul's en li's voor het menu in verwerkt.
Toen heb ik er met javascript voor gezorgt dat als hij over de div met het id "dropdown" hovert dat dan de visibility:visible is voor de div "dropdownMenu", dit werkte perfect met de code hieronder:
[JS]$("#dropdown").hover(function(){
if(document.getElementById("dropdown").className === "active"){
document.getElementById("dropdown").className = "";
document.getElementById("dropdownMenu").style.visibility = "hidden";
} else {
document.getElementById("dropdown").className = "active";
document.getElementById("dropdownMenu").style.visibility = "visible" ;
}
});[/JS]

maar nu wil ik dat als ik op de div "dropdown" klik dat de hover dan eigenlijk niet meer werkt en dat als er op geklikt wordt dat de class van "dropdown" wel active word en de visibility van "dropdownMenu" visible wordt. dit heb ik geprobeerd met de code hieronder:

[JS]// JavaScript Document

$("#dropdown").hover(function(){
if(document.getElementById("dropdown").className === "active"){
document.getElementById("dropdown").className = "";
document.getElementById("dropdownMenu").style.visibility = "hidden";
} else {
document.getElementById("dropdown").className = "active";
document.getElementById("dropdownMenu").style.visibility = "visible" ;
}
});

$("#dropdown").click(function(){
if(document.getElementById("dropdown").className === "active"){
document.getElementById("dropdown").className = "";
document.getElementById("dropdownMenu").style.visibility = "hidden";
} else {
document.getElementById("dropdown").className = "active";
document.getElementById("dropdownMenu").style.visibility = "visible" ;
}
});
[/JS]

maar als ik deze code gebruik en dan op de "dropdown" klik dan word hij active maar zodra ik er overheen hover dan is het de hover van de eerste code alleen dan compleet omgekeerd dus dan laat hij de "dropdownMenu" niet meer zien en is de class van "dropdown" ook niet meer active.

Mijn HTML code hieronder:

<div id="dropdown">
	<div id="dropdownMenu">
		<ul>
			<li>Object 1</li>
			<li>Object 2</li>
		</ul>
	</div>
</div>

Iemand enig idee?
Als je vragen hebt, vraag maar raak.

Alvast bedank.