Create a menu with DHTML (HTML, CSS, JavaScript)

Here is how you can create a simple menu for your website. Take the mouse pointer over 'Sites' below to see how it works.

Sites CodeIde Google Yahoo! Live Search Scribd Orkut

The code is very simple. We first create a hidden <div> element that will contain the menu items

<div id="menu1" style="border: 1px solid black;
     position: absolute;background-color:
     rgb(238, 255, 238); visibility: hidden;
     width: 100px;">

     <a href="http://www.codeide.com/">CodeIde</a>

     <hr height="1" noshade="noshade">
     <a href="http://www.google.com/">Google</a>
     <a href="http://www.yahoo.com/">Yahoo!</a>
     <a href="http://www.live.com/">Live Search</a>

     <hr height="1" noshade="noshade">
     <a href="http://www.scribd.com/">Scribd</a>
     <a href="http://www.orkut.com/">Orkut</a>
</div>

Then with javascript we make it visible or hidden on 'mouse over' and 'mouse out' events respectively.

<a onmouseover="document.getElementById('menu1').style
   .visibility='visible'"
   onmouseout="document.getElementById('menu1').style
   .visibility='hidden'"
   style="border: 1px solid black;">Sites</a>

We have to add mouse over and mouse out events also to the hidden div element, otherwise the menu will be gone whenever we try to take the mouse on it. The whole code looks like this

<table>
 <tr>
     <td>
         <a onmouseover="document.getElementById
         ('menu1').style.visibility='visible'"
         onmouseout="document.getElementById
         ('menu1').style.visibility='hidden'"
         style="border: 1px solid black;
         background-color: rgb(153, 204, 255);">
         Sites </a>

         <div onmouseover="document.getElementById
         ('menu1').style.visibility='visible'"
         onmouseout="document.getElementById
         ('menu1').style.visibility='hidden'"
         id="menu1" style="border: 1px solid black;
         position: absolute; margin-top: -2px;
         background-color: rgb(238, 255, 238);
         visibility: hidden; width: 100px;">
          <a href="http://www.codeide.com/">CodeIde</a>
          <hr height="1" noshade="noshade">
          <a href="http://www.google.com/">Google</a>
          <a href="http://www.yahoo.com/">Yahoo!</a>
          <a href="http://www.live.com/">Live Search</a>
          <hr height="1" noshade="noshade">
          <a href="http://www.scribd.com/">Scribd</a>
          <a href="http://www.orkut.com/">Orkut</a>
         </div>
     </td>
 </tr>
</table>

It is working in all major browsers (IE7, Firfox 2, Opera).