Dropdown

[Enos]

Hey all i'm new to this forum and also a little new to using css and javascript. I found this code on the web for a dropdown menu but for some reason whoever made it doesn't have it so that when you are not moused over the first tab, the second level disappears. I was just wondering if anyone could help me out here. Here is the js:
=============== ====
[CODE=javascript]var mastertabvar=ne w Object()
mastertabvar.ba seopacity=0
mastertabvar.br owserdetect=""

function showsubmenu(mas terid, id){
if (typeof highlighting!=" undefined")
clearInterval(h ighlighting)
submenuobject=d ocument.getElem entById(id)
mastertabvar.br owserdetect=sub menuobject.filt ers? "ie" : typeof submenuobject.s tyle.MozOpacity =="string"? "mozilla" : ""
hidesubmenus(ma stertabvar[masterid])
submenuobject.s tyle.display="b lock"
instantset(mast ertabvar.baseop acity)
highlighting=se tInterval("grad ualfade(submenu object)",50)
}

function hidesubmenus(su bmenuarray){
for (var i=0; i<submenuarray. length; i++)
document.getEle mentById(submen uarray[i]).style.display ="none"
}

function instantset(degr ee){
if (mastertabvar.b rowserdetect==" mozilla")
submenuobject.s tyle.MozOpacity =degree/100
else if (mastertabvar.b rowserdetect==" ie")
submenuobject.f ilters.alpha.op acity=degree
}


function gradualfade(cur 2){
if (mastertabvar.b rowserdetect==" mozilla" && cur2.style.MozO pacity<1)
cur2.style.MozO pacity=Math.min (parseFloat(cur 2.style.MozOpac ity)+0.1, 0.99)
else if (mastertabvar.b rowserdetect==" ie" && cur2.filters.al pha.opacity<100 )
cur2.filters.al pha.opacity+=10
else if (typeof highlighting!=" undefined") //fading animation over
clearInterval(h ighlighting)
}

function initalizetab(ta bid){
mastertabvar[tabid]=new Array()
var menuitems=docum ent.getElementB yId(tabid).getE lementsByTagNam e("li")
for (var i=0; i<menuitems.len gth; i++){
if (menuitems[i].getAttribute(" rel")){
menuitems[i].setAttribute(" rev", tabid) //associate this submenu with main tab
mastertabvar[tabid][mastertabvar[tabid].length]=menuitems[i].getAttribute(" rel") //store ids of submenus of tab menu
if (menuitems[i].className=="se lected")
showsubmenu(tab id, menuitems[i].getAttribute(" rel"))
menuitems[i].getElementsByT agName("a")[0].onmouseover=fu nction(){
showsubmenu(thi s.parentNode.ge tAttribute("rev "), this.parentNode .getAttribute(" rel"))
}
}
}
}
[/CODE]

Here is the CSS:
=============== =====

[CODE=css].basictab{
padding: 3px 0;
margin-left: 0;
font: bold 12px Verdana;
border-bottom: 1px solid gray;
list-style-type: none;
margin-bottom: 0;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.basictab li{
display: inline;
margin: 0;
}


.basictab li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 2px;
border: 1px solid gray;
border-bottom: none;
background-color: #006699;
color: black;
}


.basictab li a:visited{
color: black;
}

.basictab li a:hover{
background-color: #006FA4;
color: black;
}

.basictab li a:active{
color: black;
}

.basictab li.selected a{ /*selected tab effect*/
position: relative;
top: 1px;
padding-top: 4px;
background-color: #dbffff;
color: black;
}


.submenustyle{
padding: 2px 1px;
border: 1px solid black;
border-top-width: 0;
width: auto;
display: none;
filter:alpha(op acity=0);
-moz-opacity:0;
}

* html .submenustyle{ /*IE only width definition*/
width: 100%;
}

.submenustyle a{
border-right: 1px dashed black;
padding: 1px 5px;
text-decoration: none;
}

.submenustyle a:hover{
background-color: #;
}[/CODE]


Thanks in advance for any help.

[acoder]

Just a tip when using scripts written by someone else. Unless you have no intention to change it, make sure it works exactly how you want it and that you understand it. If it doesn't work as expected, just use another one. Try not to use one that uses browser detection, otherwise you may have to modify it at a later date.