Simple Menu using CSS and DIV tags

Hi Experts

The code below shows a simple menu using CSS and DIV tags.  When you mouseover a link, a slide out menu appears.

What I want to do is when you mouseover a link e.g. LINK THREE, then mouseover item 4 within LINK THREE another slide out menu appears to the side of it.
How do I apply this to my code?

See below for code

LINK ONE             LINK TWO             LINK THREE
item 1                 item 1                   item 2
item 2                                             item 3
                                                      item 4 > item1
                                                                   item2
                                                                   item3


****** CSS File ********

.menu
{
font-family: Lucida Sans;
text-align:center;
font-size: 80%;
position:absolute; top:5px;width:100px;
color:white;
border:1px solid white
}

.sub
{
background-color:#CCCCCC;
color:black;
}


****** HTML Code *******

<script type="text/javascript" language="javascript">
     function SelectItem(menu)
     {
          menu.childNodes[1].style.display = "block";
     }
     function HideItem(menu)
     {
          menu.childNodes[1].style.display = "none";
     }
</script>


<div style="width: 110px; left:75px;" class="menu">
<a href="default.html">Home</a>
</div>
                        
<div style="width: 110px; left:185px;" class="menu" onMouseOver="SelectItem(this)" onMouseOut="HideItem(this)">
How To
       <div class="sub" style="width: 110px; display: none;">
       <a href="NotAvailable.html">Build a PC</a>
       <br>
       <a href="NotAvailable.html">Build a Website</a>
       </div>
</div>            
            
<div style="width: 110px; left:295px;" class="menu" onMouseOver="SelectItem(this)" onMouseOut="HideItem(this)">
Special Interests
       <div class="sub" style="width: 110px; display: none;">
       <a href="NotAvailable.html">Cars</a>
        </div>
</div>
                        
<div style="width: 110px; left:405px;" class="menu">
<a href="NotAvailable.html">Reference</a>
</div>
                        
<div style="width: 110px; left:515px;" class="menu">
<a href="NotAvailable.html">About us</a>
</div>