Adding childs to submenu

How can I create a child

[cssrooky]

Hi everybody,
I'm new in CSS and I would like to know if any of you can help me with my menu. I have a sub-menu and I would like to create a child to each sub-menu. I want to create one child to General Info. This is what I have so far:

<!--- Iss Staff INFO --->
  <td onMouseOver="showmenu('issstaff')" onMouseOut="hidemenu('issstaff')" class="Main_NavBar_Menu"><a href="#"><img src="images/new_images/b-issstaff.gif" alt="issstaff" width="66" height="15" /></a><br />
  <!--- Iss Staff INFO DROP DOWN --->
   <table class="menu" id="issstaff" width="120">
   <tr><td class="menu"><a href="3">General Info</a></td></tr>
   <tr><td class="menu"><a href="3">Local Info</a></td></tr>
   <tr><td class="menu"><a href="3">My Info</a></td></tr>
   </table>
  </td>

[rocknbil]

Welcome aboard cssrooky, start it off right.

Tables are for tabular data.

id | first name | last name 
1 | joe | smith 
2 | mary | contrary 

What you have there is a list of links.

<ul id="main-menu"> 
 <li><a onMouseOver="showmenu('issstaff')" href="put_real_link_here.html"> 
 <img src="images/new_images/b-issstaff.gif" alt="issstaff" width="66" height="15" /></a> 
 <!--- Iss Staff INFO DROP DOWN ---> 
 <ul id="issstaff"> 
 <li><a href="3">General Info</a></li> 
 <li><a href="3">Local Info</a></li> 
 <li><a href="3">My Info</a></li> 
 </ul> 
 </li> 
</ul> 

Note I removed "class="menu". Look how to assign style to those via the parent UL. This is not the most efficient CSS, I laid them all out separately so you can examine them individually.

#main-menu { margin:0;padding:0; }
#issstaff { margin:0 0 0 18px;padding:0; }
#main-menu li { list-style:none; }
#issstaff li { display:none; list-style:none; padding:6px; background: #fcf8ed; }

Presuming of course your showmenu function does something like

document.getElementById('issstaff').style.display='block';

Or you could eliminate the styles on the child lists and do

#main-menu,
#main-menu, ul
#main-menu li,
#main-menu ul li { list-style:none; margin:0;padding:0; }
#main-menu ul li { display:none; margin-left:18px; padding:6px; background: #fcf8ed; }

Someone will be along soon to show you how you can show/hide those submenus using pure CSS, without Javascript. :-)

[cssrooky]

Hi rocknbil and thanks for your quick reply. I also have a css file that I forgot to include when I posted. Check this please.
@charset "utf-8";
/* CSS Document */

body {
background-color:#6F744A;
background-image:url(../images/bg.jpg);
background-repeat:no-repeat;
font-size:80%;
margin:0px;
overflow:auto;
}

h1,h2,h3,h4 {
font-family:arial,sans-serif,verdana,helvetica;
color:#FFFFFF;
text-transform:uppercase;
font-weight:bold;
}

body,p,table,td,th,ul,ol,textarea,input {
font-family:arial,sans-serif,verdana,helvetica;
color:#FFFFFF;
}

img {
border:none;
}

/*TOP BAR LINKS*/
.topBar {
width:900px;
margin-top:10px;
margin-left:auto;
margin-right:auto;
height:28px;
}

#topComein {
height:28px;
width:120px;
text-align:center;
text-transform:uppercase;
font-weight:bold;
overflow:hidden;
vertical-align:middle;
}

#topBottons {
background-image:url(../images/bt_mouseout.gif);
height:28px;
width:120px;
font-size:100%;
text-align:center;
text-transform:uppercase;
font-weight:bold;
overflow:hidden;
vertical-align:middle;
}

#topBottons a:link,#topBottons a:visited {
font-size:100%;
text-decoration:none;
text-align:center;
text-transform:uppercase;
font-weight:bold;
overflow:hidden;
color:#FFFFFF;
}

#topBottons a:hover {
font-size:100%;
text-decoration:underline;
text-align:center;
text-transform:uppercase;
font-weight:bold;
overflow:hidden;
color:#FFFFFF;
}



/*TOP BANNER*/
.topBanner {
background-image:url(../images/topBanner_bg.png);
background-repeat:no-repeat;
width:908px;
height:142px;
margin-left:auto;
margin-right:auto;
}

/*Main_NavBar*/
.Main_NavBar {
background-image:url(../images/Main_NavBar_bg.gif);
background-repeat:no-repeat;
width:908px;
height:27px;
margin-left:auto;
margin-right:auto;
}

.Main_NavBar_line {
background-image:url(../images/Main_NavBar_Line.gif);
width:1px;
}

/*Menu*/
.Main_NavBar_Menu {
height:27px;
padding-left:10px;
}

table.menu {
font-size:90%;
position:absolute;
visibility:hidden;
}

table.menu a:link {
color:#FFFFFF;
text-decoration:none;
font:bold;
text-transform:uppercase;
}

table.menu a:hover{
color:#FFFFFF;
text-decoration:underline;
}

td.menu{
background:#12858B;
}

#issinfo, #admission, #curriculum, #schoolnews, #issstaff, #activities, #pictures {
background:#0F6E74;
}

/*Main Image*/
.Main_Image {
background-image:url(../images/Main_Image_bg.gif);
background-repeat:no-repeat;
width:908px;
height:215px;
margin-left:auto;
margin-right:auto;
text-align:center;
}

/*CONTENT*/

/*Index Content*/

.content {
background-image:url(../images/line_bar.gif);
background-repeat:repeat-y;
width:908px;
margin-left:auto;
margin-right:auto;
}

.content a:link, a:visited {
color:#FFFFFF;
text-decoration:underline;
}

.content a:hover {
color:#FFFFFF;
text-decoration:none;
}

.Content_index {
min-height:400px;
padding:10px;
vertical-align:top;
}

/*sidebars index*/
.index_content_left {
background-image:url(../images/content_bottom_left_bg.gif);
width:220px;
text-align:center;
color:#FFFFFF;
text-transform:none;
vertical-align:top;
}


.index_content_left table {
width:90%;
line-height:120%;
text-align:left;
padding-left:10px;
padding-top:10px;
padding-right:10px;
}

.index_content_left td {
padding:5px;
}

.index_content_right {
background-image:url(../images/content_bottom_right_bg.gif);
width:220px;
text-align:center;
color:#FFFFFF;
text-transform:none;
vertical-align:top;
}


.index_content_right table {
width:90%;
line-height:120%;
text-align:left;
padding-left:10px;
padding-top:10px;
padding-right:10px;
}

.index_content_right td {
padding:5px;
}

/*secondary pages content*/
.Content_inner {
min-height:400px;
padding:10px;
vertical-align:top;
}

.Content_inner img {
padding-top:5px;
padding-right:15px;
padding-bottom:10px;
}

/*secondary pages content sidebar*/
.content_inner_left {
background-image:url(../images/content_bottom_left_bg.gif);
width:262px;
text-align:center;
vertical-align:top;
}

.content_inner_left table {
width:90%;
line-height:120%;
text-align:left;
padding-left:10px;
padding-top:10px;
padding-right:10px;
}

.content_inner_left td {
padding:10px;
}


/*extras*/
.content_bottom {
width:908px;
margin-left:auto;
margin-right:auto;
}


/*BOTTOM*/



.bottom {
background-image:url(../images/bottom_bg.png);
background-repeat:repeat-y;
width:908px;
margin-left:auto;
margin-right:auto;
width:908px;
height:35px;
text-align:center;
padding-bottom:10px;

}

.bottom a:link, a:visited {
font-size:70%;
color:#FFFFFF;
text-decoration:none;
text-transform:uppercase;
}

.bottom a:hover {
text-decoration:underline;
}

[jason_m]

well,

when a boy meets a girl and they love each-other very much...

sorry couldn't resist.