JavaScript - Two Javascript Menus

Hi,

I have created a global navigation includes document. Unfortunately the drop down menus that are part of the navigation aren't working. They worked fine when they were part of the page, but now that they are separated from the page as includes the drop down menus don't appear in my test site (posted to a web server). All other content in the includes file appears and works. Any ideas?

Thanks for your help.

I virtually know no javascript, but have been trying to create some sliding menus. 4 Menus along the bottom of the screen that on mouse over, a sub menu slides up from them.

I managed to get them to work to slide up, but then when I put the code in to slide back down again it started spazzing out!

Can anyone help at all? Here's my javascript code.

Code:

<script type="text/javascript">

var curVisible;
var oldObject;
var pusher;
var pushBack;
var inMotion = false;

function reveal(obj) {

	if(curVisible != null) {
		oldObject = curVisible;
	}

	if(!inMotion) {
		curVisible = obj;		
		pusher = -100;
		pushBack = 40;
		document.getElementById(obj).style.visibility = "visible";
		document.getElementById(obj).style.bottom = pusher+"px";
		animateOut();
		animateIn();
	}
}

function hide() {
	animateIn();
}


function animateIn() {
	if (pushBack > -100) {
		inMotion = true;
		pushBack -=4;
		document.getElementById(oldObject).style.bottom = pushBack+"px";
		setTimeout(animateIn, 20);
	} else {
		document.getElementById(oldObject).style.visibility = "hidden";
		inMotion = false;
	}
}


function animateOut() {
	
	if(pusher < 40) {
		inMotion = true;
		pusher += 4;
		document.getElementById(curVisible).style.bottom = pusher+"px";
		setTimeout(animateOut, 20);
	} else {
		inMotion = false;
	}
}

</script>

Thanks very much. Have tried loads, but just can't seem to get it to work. It's a lot more complicated than I first thought.

Dave

I want to make a menu like this web site :http://www.petrobras.com.br/pt/
When your move the cursor on it , a new windows open and there is a picture in left side and submenues in right side

I myself think it is a jquery tool but I don't know how to make some thing like this

How can I do so ?

thanks

Hi All,

Hope someone can help me with this.

I have been using a free javascript code to make some drop-down menus.

this is the link for the code on dynamic drive. http://www.dynamicdrive.com/dynamici...anylinkcss.htm

The script works fine and I have been using it for a while now. However, one of the websites that I run has just asked me to include a sub menu on one of the menu items.

I have managed to get the sub menu to show as requested by using the normal drop down menu and adding a Quote:
rev="lr"
and giving it another class and rel. However, When the link is hovered over the menu appears to the side as expected but when you move onto that "sub-menu" the original menu disappears. can anyone suggest what changes I would need to make so that the first menu does not disappear?

Any help would be greatly appreciated.

As you can tell I am new to JavaScript (hence the use of free codes)

Hello! I am currently using this code on a webpage that lists the site members.

Code:

function toggleMenu(objID) {
if (!document.getElementById) return;
var ob = document.getElementById(objID).style;
ob.display = (ob.display == 'block')?'none': 'block';
}[

For some reason, and maybe this is the function of it (I am not sure,) when you click 'characters' on the tables lower down on the page, you are sent to the top of the page again.

Here is the page in question, if it's necessary: http://oursideofthemountain.webs.com/members.htm

Any help in this matter would be greatly appreciated! I am very new to Javascript, so please be patient with me!

I would love some help on this code I was assigned to debug...I never studied javascript nor have ever coded really, yet my boss(im volunteering at a company) is having me debug a website and I can't seem to figure this out.

The problem is the menus stay expanded when the mouse is out, but when you activate the onMouseOver, it fixes it.

Here is an extremely simplified version but it shows the problem. And I greatly appreciate any help I can get. Thanks in advance!

Oh and I didn't write any of this + im a noob at coding so if the answer was explained with this in mind that'd be great!

-----------




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!-- xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> -->

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Yep</title>

<link href="ReferenceFunctions.css" rel="stylesheet" type="text/css" />

<!--<script type="text/javascript" src="/offices/management_support/js/tab-view.js"></script>-->

<!-- ************************ BEGIN Section 1 *************************************** -->
<script type="text/javascript">
function ManageTabPanelDisplay() {
//
// Between the parenthesis, list the id's of the div's that
// will be effected when tabs are clicked. List in any
// order. Put the id's in single quotes (apostrophes)
// and separate them with a comma -- all one line.
//
var idlist = new Array('tab1focus','tab2focus','tab3focus','tab1ready','tab2ready','tab3ready','content1','content2', 'content3');

// No other customizations are necessary.
if(arguments.length < 1) { return; }
for(var i = 0; i < idlist.length; i++) {
var block = false;
for(var ii = 0; ii < arguments.length; ii++) {
if(idlist[i] == arguments[ii]) {
block = true;
break;
}
}
if(block) { document.getElementById(idlist[i]).style.display = "block"; }
else { document.getElementById(idlist[i]).style.display = "none"; }
}
}

//SuckerTree Horizontal Menu (Sept 14th, 06)
//By Dynamic Drive: http://www.dynamicdrive.com/style/

var menuids=["treemenu1"] //Enter id(s) of SuckerTree UL menus, separated by commas

function buildsubmenus_horizontal(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
if (ultags[t].parentNode.parentNode.id==menuids[i]){ //if this is a first level submenu
ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px" //dynamically position first level submenus to be height of main menu item
ultags[t].parentNode.getElementsByTagName("a")[0].className="mainfoldericon"
}
else{ //else if this is a sub level menu (ul)
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
ultags[t].parentNode.getElementsByTagName("a")[0].className="subfoldericon"
}
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.visibility="visible"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.visibility="hidden"
}
}
}
}

if (window.addEventListener)
window.addEventListener("load", buildsubmenus_horizontal, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus_horizontal)
</script>
<!-- ************************ END Section 1 *************************************** -->
<!-- ************************ BEGIN Section 2 *************************************** -->
<script type="text/javascript">
<!-- *************Not sure why this is commented out ********
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=15; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
<!-- ************************ END Section 2 *************************************** -->
<!-- ************************ BEGIN Section 3 *************************************** -->
<script type="text/javascript">

function decide() {

if (document.myca.search.value.length < 1) {
window.alert ("Please enter a search keyword.");
return false;
}

if (document.myca.whosearch[0].checked) {
document.myca.sSearchString.value = document.myca.search.value;
document.myca.submit();

} else {
if (document.myca.whosearch[1].checked) {
document.thissite[1].value = document.myca.search.value;
document.thissite.submit();

} else {
alert("You must select whether you want to search My CA or This Site.");
}

}

return false;
}
</script>
<!-- ************************ END Section 3 *************************************** -->
<!-- ************************ BEGIN Section 4 *************************************** -->
<script type="text/javascript">

<!--*************Not sure why this is commented out ********-->
<!--
var defaultMainList = "Home";


function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function FP_swapImg() {//v1.0
var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
elm.$src=elm.src; elm.src=args[n+1]; } }
}

function FP_preloadImgs() {//v1.0
var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }
}

function FP_getObjectByID(id,o) {//v1.0
var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
return null;
}
-->

</script>
<!-- ************************ END Section 4 *************************************** -->
<!-- ************************ BEGIN Section 5 *************************************** -->
<style type="text/css">

.blueLink {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #000066;
font-size: 71%;
}
.Office_functions_sub_title {
font-size: xx-small;
color: #0066CC;
}
.style1 {
font-size: small
}
.pixel_height {
font-size: 5px;
}
.blank_menu_space_height {
font-size: 5px;
font-family: Arial;
}
.turquoise {
color: #00FFCC
}
.blue_font {
color: #0000FF;
font-size: small;
}
body {
margin-top: 0px;
margin-bottom: 0px;
}
.style7 {color: #000066}
.style10 {font-family: Verdana, Arial, Helvetica, sans-serif}
.style11 {
font-size: 12px
}
.style12 {font-size: 14px}
.style13 {font-size: 65%}
.style14 {font-size: 12px; color: #800000; }
.style15 {
color: #FFFFFF;
font-weight: bold;
font-size: small;
}
.style17 { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #4d7fb2;
font-weight: bold;
}
.style19 {
font-family: "Times New Roman", Times, serif;
font-size: 18pt;
color: #FFFF00;
}
.style22 {font-size: 11px}
</style>
<!-- ************************ END Section 5 *************************************** -->
</head>
<body onload="FP_preloadImgs(/*url*/'images/button13.jpg', /*url*/'images/button4a.jpg'); MM_preloadImages('indeed.jpg' )">

<!--<body onload="MM_preloadImages('yep.jpg','yep.jpg')">-->
<table width="900" border="0" align="center" cellpadding="0" cellspacing="0">
<!-- ************************ BEGIN Section 6 *************************************** -->
<tr>
<!--BEGIN Table Set-Up -->

<!--CLOSE Table Set-Up -->
</tr>
<!-- ************************ END Section 6 *************************************** -->
<!-- ************************ BEGIN Section 7 *************************************** -->
<tr>
<td style="height:17px"><div align="center" class="style15">
<table width="100%" border="1">
<tr>
<td><div align="center">link</div></td>
</tr>
</table>
</div></td>
</tr>
<!-- BEGIN Table Set-Up 1 -->

<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0" style="background-color:#ffffff">
<tr>
<td valign="top" style="padding-left:12px; text-align:left; line-height:186%;"><table width="100%" border="0" cellspacing="0" cellpadding="0" style="background-color:#ffffff">
<!-- BEGIN Table Set-Up 2 -->
<tr>
<td rowspan="72" valign="top"><table border="0" cellspacing="0" cellpadding="0" style="background-color:#fff">
<!--BEGIN Example Office- Menut Table SET-UP-->
<tr>
<td valign="top" style="padding-right:12px"><table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><table width="185" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="9px"></td>
</tr>
<tr>
<td class="boxtitle style12">testings12345</td>
</tr>
<!-- BEGIN Sub-Section A thru C -->
<tr>
<td><div class="left_column_top">
<dl id="menu">
<!-- ************************ BEGIN Sub-Section A *************************************** -->
<dt onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();"> <a href="link.htm">link</a></dt>
<!-- ************************ END Sub-Section A *************************************** -->
<!-- ************************ BEGIN Sub-Section B *************************************** -->
<dt onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();"> <a href="link.htm">link</a></dt>
<dd id="smenu2" onmouseover="javascript:montre('smenu2');"
onmouseout="javascript:montre();">
<ul>
<li><a href="link.htm"> link</a></li>
<li><a href="link.htm"> link</a></li>
<li><a href="link.htm"> link</a></li>
<li><a href="link.htm">link</a></li>
<li><a href="link.htm">link</a></li>
</ul>
</dd>
<!-- ************************ END Sub-Section B *************************************** -->
<!-- ************************ BEGIN Sub-Section C *************************************** -->
<dt onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();"> <a href="link.htm"> link</a></dt>
<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">
<ul>
<li><a href="link.pdf"> link</a></li>
<li><a href="link.pdf"> link</a></li>
<li><a href="link.pdf"> link</a></li>
<li><a href="link.htm"> link</a></li>
<li><a href="link.htm">link</a></li>
<li><a href="link.htm"> link</a></li>
<li><a href="link.htm"> link</a></li>
<li><a href="link.htm"> link</a></li>
<li><a href="link.htm"> link</a></li>
</ul>
</dd>
<!-- ************************ END Sub-Section C *************************************** -->
<dt onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();"> <a href="ble.htm" style="line-height: 200%"> link<br />
link
</a></dt>
<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">
<ul>
<li><a href="link233link.htm"> link</a></li>
<li><a href="indeedy.htm"> link</a></li>
<li><a href="training/linsks.htm"> link</a></li>
</ul>
</dd>
<dt onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre();"> <a href="yep.htm"> link</a></dt>
<dt onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre();"> <a href="indeed.htm"> link</a></dt>
<dt onmouseover="javascript:montre('smenu7');" onmouseout="javascript:montre();"> <a href="thanks.htm"> link</a></dt>
</dl>
</div></td>
</tr>
<!-- CLOSE Sub-Section A thru C -->
</table></td>
</tr>
<td><table width="185px" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="40px"></td>
</tr>
<tr>
<td class="boxtitle style12">link</td>
</tr>
<!--BEGIN Sub-Section D thru F -->
<tr>
<td><div class="left_column_bottom" style="height:125px">
<dl id="menu">
<!-- ************************ BEGIN Sub-Section D *************************************** -->
<dt onmouseover="javascript:montre('smenu10');" onmouseout="javascript:montre();">
<a href="yes.htm">link</a></dt>

<dt onmouseover="javascript:montre('smenu11');" onmouseout="javascript:montre();">
<a href="yep.htm">random words</a></dt>

<dt onmouseover="javascript:montre('smenu12');" onmouseout="javascript:montre();"> <a href="tests.htm">
<p style="line-height: 200%; margin-top: 1px; margin-bottom: 1px">
ble<br> mhm</p></a></dt>

<dt onmouseover="javascript:montre('smenu13');" onmouseout="javascript:montre();">
<a href="communication/testsss.htm">Just some test</a></dt>
<!-- ************************ END Sub-Section D *************************************** -->
</dl>
</div></td>
</tr>
<tr>
<td >&nbsp;</td>
</tr>
<!--CLOSE Sub-Section D thu F -->
</table></td>
</tr>


<tr>

<td align="center">
<p align="center" id="legal"><!-- Original Template Designed by etc -->
<a href="#heading"></a></p> </td>
</tr>

<!-- BEGIN Office Chief Table -->
</table></td></tr>
<!-- </td> SICR TAble -->
<!-- </tr> CLOSE only TR Table Set-Up 2 -->
</table>
<p align="center">
</table>
<!--CLOSE MAIN TABLE-->
<a href="#heading"> Back to Top</a><br />
</td>
</tr>
</table>
</td>
</tr>
<!-- CLOSE Table Set-Up 1 -->

<!-- ************************ END Section 7 *************************************** -->
</p>
<tr>
<td style="height:1px ;background-color:#CCCCCC"></td>
</tr>
</body>
</html>

hi,

I am making a driving map which shows lines on the map based on point of departure and destination. It's working fine he http://www.xelawho.com/map/drive2.htm

but what I would like to do is instead of having all the sidebar checkbox business, just to have two dropdown boxes - one for "from" and one for "to".

I have seen plenty of these around but my problem is that my data comes from an xml file, so I guess the menus would have to be populated by loops. The other problem being that not every departure point goes to every destination, so the second menu would have to be populated dynamically depending on the option chosen in the first...

does anybody have any ideas how I would do this?

thanks in advance.

Take a look at this - http://s385506566.websitehome.co.uk/

If it is ran in either chrome or safari it acts as it should (the sub menus open below the nav bar)

but in IE and Firefox it is very different and a problem (the sub menus open Above! the nav bar)

Any Ideas?

Hi there, im new to the forum and currently in the process of building a website.
Unfortunetly it needs a little javascript putting in and I dont know any javascript atall.

So heres my problem:
--------------------

I want 3 drop down menus where
you change the top option, the middle menu updates (from a sql database),
you change the middle option then the bottom option updates (again from the database).
you select the 3rd option.
it searches a database for the item matching all 3 entrys
it displays the price

all without reloading the page

then you add the item to cart.

------------
Heres my site with fake data in the dropdowns:
http://xeon.donov.co.uk/~blinky/?a=cat_sub&cid=3&f=A3

I'm currently looking to revamp the Link Exchange section on my website.

Rather than clutter it with banners, I am going to put all the links into a drop down menu, with the banner for the selected site under it.

The intention is that when you select a site from the list, the banner underneath changes. However, I can only get it to do this once, then it simply refuses to let you select anything else.

This is the code I am using to change it:

Code:

function defineimage()
{
	if (document.forms[0].gourl.value = "http://jeff.zhomg.com")
	{
		document.images.linkimage.src = '/images/exchange/jeff.gif'
	}
	else if (document.forms[0].gourl.value = "http://www.strangedrawingsartgallery.com")
	{
		document.images.linkimage.src = '/images/exchange/SCH.jpg'
	} 
}

And this is my drop down menu, and the image I'd like to change:

Code:

<p><select name="gourl" onChange="defineimage()">
  <option value="http://www.strangedrawingsartgallery.com" selected>Strange City Heroes</option>
  <option value="http://jeff.zhomg.com">Invincible Jeff</option>
  </select>&nbsp;<input type="submit" name="Submit" value="Go to Site" onClick="dropdown()"></p><p><img src="/images/exchange/SCH.jpg" alt="SCH" name="linkimage" width="468" height="60" border="0" id="linkimage"></p>

If you are unsure what I mean by this, you can see for yourself by going to the page in question and selecting 'Invincible Jeff' from the list. The banner will change, but you won't be able to change the selection again.

Many thanks (again) for the help.

I've built a site with DW4 and the spry menus are not working. they worked for a little while and then I changed something in the JS menu on the template and now none of the spry works on my site.

also, I imbedded a google gadget and that didn't show up either!

any help would be appreciated. thx:

Hi,
I'm using this to put menus on my website

http://simplythebest.net/scripts/DHT...script_79.html

at the top it says its capable of having more than one menu on a page, but it doesnt give the directions.
The website it links to for more help is dead.

Can anyone help me out?

Hi,

I am trying to use JavaScript for several linked drop down menus. The contents of the first drop down menu is defined in the code of the form, however, I do not know the best way to populate the following drop down menus depending on the selection of the previous.

I have something working with the following JavaScript code, however as there are lots of options I am not sure whether this is the best way of doing this.

Code:

 <script type="text/javascript">

function setYear(chosen, selbox) {
 
selbox.options.length = 0;
if (chosen == " ") {
  selbox.options[selbox.options.length] = new Option('Please select a year',' ');
setTimeout(setYear(' ',document.question.subject),5);
 
}
if (chosen == "1") {
  selbox.options[selbox.options.length] = new
Option('exam1','11');
  selbox.options[selbox.options.length] = new
Option('exam2','12');
selbox.options[selbox.options.length] = new
Option('exam3','13');
selbox.options[selbox.options.length] = new
Option('exam4','14');
selbox.options[selbox.options.length] = new
Option('exam5','15');
setTimeout(setYear('11',document.question.subject),5);

}




if (chosen == "2") {
  selbox.options[selbox.options.length] = new
Option('exam6','twoone');
  selbox.options[selbox.options.length] = new
Option('exam7','twotwo');
 selbox.options[selbox.options.length] = new
Option('exam8','twothree');
 selbox.options[selbox.options.length] = new
Option('exam8','twofour');
 selbox.options[selbox.options.length] = new
Option('exam9','twofive');
 selbox.options[selbox.options.length] = new

}
if (chosen == "3") {
  selbox.options[selbox.options.length] = new
Option('exam10','threeone');
  selbox.options[selbox.options.length] = new
Option('exam11','threetwo');
  selbox.options[selbox.options.length] = new
Option('exam12','threethree');
  selbox.options[selbox.options.length] = new

}


if (chosen == "11") {
  selbox.options[selbox.options.length] = new
Option('subject1','111');
}


}


</script>

This is what I have in the form:
Code:

   
        <td>Minimum DBS Year: </td><td colspan="2">
     <select name="DBSyear" onchange="setYear(document.question.DBSyear.options
[document.question.DBSyear.selectedIndex].value,
document.question.exam);">
<option value=" " selected="selected"> </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
		</tr>
		<tr>
		<td>
		Exam Paper:
		</td>
		<td>
		 <select name="exam" onchange="setYear(document.question.exam.options
[document.question.exam.selectedIndex].value,
document.question.subject);">
<option value=" " selected="selected">Please select a year</option>
</select>
</td>
		</tr>
		<tr>
		<td>
		Subject:
		</td>
		<td>
		<select name="subject" size="1">
<option value=" " selected="selected">Please select an exam</option>
</select>
		</td>
		</tr>

How would I populate the drop down menus from tables in the database and filter the options depending on the previous drop down selection??

I would appreciate any help!

This is my website:

http://serenityvalley.org/rattery/

As you can see to the left is my menu. I didn't want my menu being so long and going down so far. I wanted to make it so that where it says "Our Girls" and "Our Boys", you could hover over the words, and they would drop down the little menus which contain the links to all the girls and boys pages.

I don't want people jut throwing a line of code at me, but I actually want help explaining how the code does what it does, how I incorporate it into the site.

I've had people just throw lines of text at me without telling me where the text actually goes, like if its CSS, I don't know how CSS works. So I need help telling me what goes where...