Hello All:

I've searched, coded, re-coded then checked again. I have no idea how to create a second tier dropdown menu. You can see what I'm talking about at the following page...

www.caffreytree.com/page44.html


The following code works great as long as I don't add the additional second tier menu. Can anyone help? What I'm trying to achieve is when someone rolls over a menu item, a dropdown menu opens. From that submenu, if someone rolls over an item in the submenu, another drop menu will appear. We see this all over the net. Is it that easy and I'm just not seeing it? Help please...



/* The whole menu */
#menu { list-style: none;
padding: 0px;
margin-left: 0px;
margin-top:0px;
font-family:sans-serif;

}



/* Each menu name */
#menu li {float: left;
position: relative;
width: 10em;
font-size:9pt;
font-weight:bold;
text-align: center;
cursor: default;
background:url(images/linksbar.jpg) center left no-repeat;

}


/* each main menu link */
#menu li a {
color: black;
text-decoration:none;
width: 130px;
display: block;
}



#menu li a:hover {
padding: 0px;
color: white;
}



/* The entire submenu */
#menu li ul {
display: none;
position: absolute;
margin-top: 0px;
margin-right: 115px;
margin:bottom 0px;
margin-left: 40px;
top: 18px;
left: -37px;
font-weight: normal;
background: white;
padding: 0px;
}



/* Each submenu item */
#menu li ul li {
padding: 0px;
margin: 0px;
float: none;
list-style-type: none;
text-align:left;
text-indent: 0px;
width: 130px;
color:#334c19;
background:white;
border: 1px solid black;
}



#menu li ul li a{
color: #334c19;
text-decoration: none;
}



#menu li ul li a:hover{
color: black;
background-color:#669933;
text-decoration: none;
width: 130px;
}




/* The entire 2nd level submenu */
#menu li ul ul {
display: block;
position: absolute;
margin-top: -18px;
margin-right: 0px;
margin:bottom 0px;
margin-left: 153px;
font-weight: normal;
background-color: none;
padding: 0px 0px 0px 0px;
}