Simple drop down issues

[lAZLf]

So, I'm trying to implement a dropdown menu. It works by putting an "onmouseover" thing on one of the links to show a list with links. On the list i put "onmouseout" attribute to hide it. The problem is that on the list are links, when you hover your mouse over the links, the menu is hidden again. How do I fix this?

 

To see the problem go to http://www.annarboruncovered.com/  and hover over the "places" link.

 

Javascript:

function hide(id) {
var obj = document.getElementById(id);

obj.style.display = "none";
}

function show(id) {
var obj = document.getElementById(id);
obj.style.display = "block";
}

 

HTML:

<div id="menu">
<div id="links">

	 	  <a href="index.php" class="link"> HOME</a>    
      <a href="#" class="link" onmouseover="show('dropdown')"> PLACES</a>    
      <a href="#" class="link"> ABOUT</a>    
      <a href="#" class="link"> LINKS</a>    
      <a href="index.php?page=contact" class="link"> CONTACT</a><br/>
  <a href="index.php?page=restaurants" class="link"> RESTAURANTS</a>    
      <a href="index.php?page=clubs" class="link"> CLUBS</a>    
      <a href="#" class="link"> SHOPS</a>    
      <a href="#" class="link"> STUDENT MAGAZINES</a>
      </div>
  </div>
      <ul id="dropdown" onMouseOut="hide('dropdown');">
      <li class="underline"><a href="index.php?page=restaurants" class="droplink"> restaurants</a></li>
      <li class="underline"><a href="index.php?page=clubs" class="droplink"> clubs</a></li>
      <li><a href="#" class="droplink"> shops</a></li>
      </ul>