Menu et sous menu

Bonjour,
je suis entrain de faire mon premier site web mais j'ai une difficulte,
je veux realiser un menu horizontale et quand vous faite un mouse hover sur un "li" un sous menu horizontale s'ouvre mais quand vous faite "mouse out" le sous menu reste ouvrant , il se ferme juste lorque vous faite un mouse hover sur un autre "li".
aidez-moi svp,
merci beaucoup :)

voici le html :

<div id="nav">
<ul id="menuUl">
	<li>
    	<div class="col" id="li1">
        	<a href="#">LA FONDATION</a>
            	<ul class="sous-menu">
                	<li><a href="#">Presentation</a></li>
                    <li><a href="#">equipe</a></li>
                    <li><a href="#">contact</a></li>
                </ul>
          </div>
     </li>
    
    <li>
    	<div class="col" id="li2">
        	<a href="#">LES PROGRAMMES</a>
            	<ul class="sous-menu">
                	<li><a href="#">Presentation</a></li>
                    <li><a href="#">equipe</a></li>
                    <li><a href="#">contact</a></li>
                </ul>
         </div>
    </li>
    <li>
    	<div class="col" id="li3">
        	<a href="#">LES ACTUALITES</a>
            	<ul class="sous-menu">
                	<li><a href="#">Presentation</a></li>
                    <li><a href="#">equipe</a></li>
                    <li><a href="#">contact</a></li>
                </ul>
         </div>
     </li>
</ul>


</div>