JS: DropDown-Menü Problem

<script language="JavaScript" type="text/javascript">
   info = null;
 
 function showInfo(idname) {
     info = document.getElementById(idname);
     info.style.display = "block";
 }
 
 function hideInfo(idname) {
      info = document.getElementById(idname);
     info.style.display = "none";
 }
 


 </script>


<ul>
<li onclick="showInfo('link1');" onmouseout="showInfo('link1');">
    Klick hier, um etwas zu sehen.
    <div onmouseout="hideInfo('link1')" class="shortinfo" id="link1">
        <ul>
            <li onclick="blabla();">Hier InfoLink</li>
            <li onclick="blabla();">Hier InfoLink</li>
            <li onclick="blabla();">Hier InfoLink</li>
            <li onclick="blabla();">Hier InfoLink</li>
        </ul>
    </div>
</li>
</ul>