• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 221
  • Last Modified:

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

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

font-family: Lucida Sans;
font-size: 80%;
position:absolute; top:5px;width:100px;
border:1px solid white


****** 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";

<div style="width: 110px; left:75px;" class="menu">
<a href="default.html">Home</a>
<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>
       <a href="NotAvailable.html">Build a Website</a>
<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 style="width: 110px; left:405px;" class="menu">
<a href="NotAvailable.html">Reference</a>
<div style="width: 110px; left:515px;" class="menu">
<a href="NotAvailable.html">About us</a>
2 Solutions
colin_palmerAuthor Commented:
Thanks for your help.

Featured Post

2018 Annual Membership Survey

Here at Experts Exchange, we strive to give members the best experience. Help us improve the site by taking this survey today! (Bonus: Be entered to win a great tech prize for participating!)

Tackle projects and never again get stuck behind a technical roadblock.
Join Now