[FONT="Courier New"]Hi all,

This is my first post here. I'm not well versed in JavaScript, so I'm not sure how to do all the following things: (1) set up a horizontal menu with (2) + and - images as bullet points, such that clicking on the bullet points (3) changes + to - and vice versa while (4) a single-level drop down menu makes text disappear and appear.

It should look like this:
---------------------------------------------
[+] Option A [+] Option B

TEXT POPS UP HERE WHEN A OR B IS CLICKED
---------------------------------------------

Rather, the result is:

---------------------------------------------
[+] [+] Option A Option B

TEXT POPS UP HERE WHEN A OR B IS CLICKED
---------------------------------------------


This is my code now, based on something from javascript.internet.com:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TITLE</title>
<link href="Style_Sheet.css" rel="stylesheet" type="text/css" />
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<style type="text/css"><!--
#containerul, #containerul ul{
text-align:left;
margin:0; /* Removes browser default margins applied to the lists. */
padding:0; /* Removes browser default padding applied to the lists. */
}

#containerul li{
margin:0 0 0 0px;
padding:0;
list-style-type:none;
display: inline;
}

#containerul .symbols{ /* Various styles to position the symbols next to the items in the menu. */
float:left;
width:12px;
height:1em;
background-position:0 0;
background-repeat:no-repeat;
}
--></style>

<script type="text/javascript">
<!--
var temp, temp2, cookieArray, cookieArray2, cookieCount;
function initiate(){
cookieCount=0;
if(document.cookie){
cookieArray=document.cookie.split(";");
cookieArray2=new Array();
for(i in cookieArray){
cookieArray2[cookieArray[i].split("=")[0].replace(/ /g,"")]=cookieArray[i].split("=")[1].replace(/ /g,"");
}
}
cookieArray=(document.cookie.indexOf("state=")>=0)?cookieArray2["state"].split(","):new Array();
temp=document.getElementById("containerul");
for(var o=0;o<temp.getElementsByTagName("li").length;o++){
if(temp.getElementsByTagName("li")[o].getElementsByTagName("ul").length>0){
temp2 = document.createElement("span");
temp2.className = "symbols";
temp2.style.backgroundImage = (cookieArray.length>0)?((cookieArray[cookieCount]=="true")?"url(minus.png)":"url(plus.png)"):"url(plus.png)";
temp2.onclick=function(){
showhide(this.parentNode);
writeCookie();
}
temp.getElementsByTagName("li")[o].insertBefore(temp2,temp.getElementsByTagName("li")[o].firstChild)
temp.getElementsByTagName("li")[o].getElementsByTagName("ul")[0].style.display = "none";
if(cookieArray[cookieCount]=="true"){
showhide(temp.getElementsByTagName("li")[o]);
}
cookieCount++;
}
else{

}
}
}

function showhide(el){
el.getElementsByTagName("ul")[0].style.display=(el.getElementsByTagName("ul")[0].style.display=="block")?"none":"block";
el.getElementsByTagName("span")[0].style.backgroundImage=(el.getElementsByTagName("ul")[0].style.display=="block")?"url(minus.png)":"url(plus.png)";
}

function writeCookie(){ // Runs through the menu and puts the "states" of each nested list into an array, the array is then joined together and assigned to a cookie.
cookieArray=new Array()
for(var q=0;q<temp.getElementsByTagName("li").length;q++){
if(temp.getElementsByTagName("li")[q].childNodes.length>0){
if(temp.getElementsByTagName("li")[q].childNodes[0].nodeName=="SPAN" && temp.getElementsByTagName("li")[q].getElementsByTagName("ul").length>0){
cookieArray[cookieArray.length]=(temp.getElementsByTagName("li")[q].getElementsByTagName("ul")[0].style.display=="block");
}
}
}
document.cookie="state="+cookieArray.join(",")+";expires="+new Date(new Date().getTime() + 365*24*60*60*1000).toGMTString();
}
//-->
</script>
</head>
<body>
<!--BEG HEAD-->
<ul id="containerul">
<li>
OPTION 1
<ul><li>TEXT THAT POPS UP</li></ul>
</li>
<li>
OPTION 2
<ul><li>TEXT THAT POPS UP</li></ul>
</li>
<script type="text/javascript">initiate();</script>
<br />
</body>
</html>

Thanks for your help!