?
Solved

Simple Menu using CSS and DIV tags

Posted on 2005-03-14
3
Medium Priority
?
220 Views
Last Modified: 2010-04-06
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>
0
Comment
Question by:colin_palmer
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 30

Assisted Solution

by:GrandSchtroumpf
GrandSchtroumpf earned 400 total points
ID: 13538270
0
 
LVL 15

Accepted Solution

by:
babuno5 earned 800 total points
ID: 13597055
0
 
LVL 1

Author Comment

by:colin_palmer
ID: 13651021
Thanks for your help.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article covers the basics of the Sass, which is a CSS extension language. You will learn about variables, mixins, and nesting.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
Viewers will learn about if statements in Java and their use The if statement: The condition required to create an if statement: Variations of if statements: An example using if statements:
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question