Need Help With Drop Down Menu

teresamar2 · Joined: 31 May 2007 Posts: 1

I've made a drop down menu, but would like to make a few changes. First, I would like the background color to be periwinkle, and I would also like the drop downs to be directly underneath the parent. Below is the address to my menu. All help is appreciated.

www.ttcollectiblegifts.com/test.html

PayneLess Designs · Joined: 28 Feb 2007 Posts: 3593 Location: Biloxi, MS

Your coding on that page is all messed up. You have a lot of scripting which should be between the <head> tags. You also had two <head> and <html> tags. No attachments allowed so here is what I did real quickly just to get your links to be underneath:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="generator" content="Homestead SiteBuilder">



<title>untitled1</title>


<script type="text/javascript">

</script>
<link type="text/css" href="http://www.homestead.com/~media/elements/Text/font_styles_ns4.css" rel="stylesheet">
<style type="text/css">
@import url(http://www.homestead.com/~media/elements/Text/font_styles.css);
div.lpxcenterpageouter { text-align: center; position: absolute; top: 0px; left: 0px; width: 100% }
div.lpxcenterpageinner { position: relative; margin: 0 auto; text-align: left; width: 1050px; }
</style>

<script type="text/javascript">

/***********************************************
* AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href="http://www.ttcollectiblegifts.com/baby.html">Baby Gifts<\/a>'

//Contents for menu 2, and so on
var menu2=new Array()
menu2[0]='<a href="http://www.ttcollectiblegifts.com/civilwar.html">Civil War in East Tennessee<\/a>'
menu2[1]='<a href="http://www.ttcollectiblegifts.com/folklore.html">Folklore & Scary Stories<\/a>'
menu2[2]='<a href="http://www.ttcollectiblegifts.com/hiking.html">Hiking Trails, Maps & More<\/a>'
menu2[3]='<a href="http://www.ttcollectiblegifts.com/nativeamerican.html">Native American Studies<\/a>'
menu2[4]='<a href="http://www.ttcollectiblegifts.com/nature.html">Nature Lovers<\/a>'

//Contents for menu 3, and so on
var menu3=new Array()
menu3[0]='<a href="http://www.ttcollectiblegifts.com/tyler.html">Tyler<\/a>'
menu3[1]='<a href="http://www.ttcollectiblegifts.com/woodwick.html">WoodWick<\/a>'

//Contents for menu 4, and so on
var menu4=new Array()
menu4[0]='<a href="http://www.ttcollectiblegifts.com/northpole.html">North Pole Villages<\/a>'
menu4[1]='<a href="http://www.ttcollectiblegifts.com/originalsnow">Original Snow Villages<\a>'

//Contents for menu 5, and so on
var menu5=new Array()
menu5[0]='<a href="http://www.ttcollectiblegifts.com/herco.html">Herco<\/a>'
menu5[1]='<a href="http://www.ttcollectiblegifts.com/lifeimpressions.html">Life Impressions<\/a>'
menu5[2]='<a href="http://www.ttcollectiblegifts.com/wtangels.html">Willow Tree Angels<\/a>'
menu5[3]='<a href="http://www.ttcollectiblegifts.com/wtfigurines.html">Willow Tree Figurines<\/a>'
menu5[4]='<a href="http://www.ttcollectiblegifts.com/womenoftheway.html">Women Of The Way Sculptures<\/a>'
menu5[5]='<a href="http://www.ttcollectiblegifts.com/wotwornaments.html">Women Of The Way Ornaments<\/a>'

//Contents for menu 6, and so on
var menu6=new Array()
menu6[0]='<a href="http://.ttcollectiblegifts.com/greenbriertotes.html">Greenbrier Totes<\/a>'
menu6[1]='<a href="http://ttcollectiblegifts.com/isabellasjourney.html">Isabellas Journey<\/a>'
menu6[2]='<a href="http://ttcollectiblegifts.com/marcchantal.html">Marc Chantal<\/a>'

//Contents for menu 7, and so on
var menu7=new Array()
menu7[0]='<a href="http:///ttcollectiblegifts.com/harley.html">Licensed Harley Products<\/a>'

//Contents for menu 8, and so on
var menu8=new Array()
menu8[0]='<a href="http:///ttcollectiblegifts.com/fringe.html">Fringe<\/a>'
menu8[1]='<a href="http:///ttcollectiblegifts.com/shanmu.html">Shan Mu Baskets, Bowls, & Vases<\/a>'

//Contents for menu 9, and so on
var menu9=new Array()
menu9[0]='<a href="http://ttcollectiblegifts.com/adultstshirts.html">Adults T-Shirts<\/a>'
menu9[1]='<a href="http:///ttcollectiblegifts.com/caps.html">Caps<\/a>'
menu9[2]='<a href="http:///ttcollectiblegifts.com/childrenstshirts.html">Childrens T-Shirts<\/a>'
menu9[3]='<a href="http:///ttcollectiblegifts.com/novelty.html">Cherohala Skyway & Tellico Plains Novelty Souvenirs<\/a>'
menu9[4]='<a href="http:///ttcollectiblegifts.com/jackets.html">Jackets<\/a>'

//Contents for menu 10, and so on
var menu10=new Array()
menu10[0]='<a href="http://ttcollectiblegifts.com/webkinz.html">Webkinz Plush<\/a>'

var menuwidth='165px' //default menu width
var menubgcolor='#ACC8B2' //menu bgcolor
var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?

/////No further editting needed

var ie4=document.all
var ns6=document.getElementById&&!document.all

if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"><\/div>')

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}

function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top="-500px"
if (menuwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
}
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}

function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}

function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
}

return clickreturnvalue()
}

function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}

function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

if (hidemenu_onclick=="yes")
document.onclick=hidemenu

</script>

<style type="text/css">

#dropmenudiv{
position:absolute;
border:1px solid black;
border-bottom-width: 0;
font:normal 11px Comic Sans MS;
line-height:18px;
z-index:100;
}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
}

#dropmenudiv a:hover{ /*blue*/
background-color: #BEC4FD; // Change bg color here, then remove these comments
}

</style>
</head>
<body onunload="" onload="" id="element1" link="#000000" bgcolor="#FFFFFF" scroll="auto" vlink="#000000">

<noscript>
<img alt="" src="http://www.homestead.com/~media/elements/shared/javascript_disabled.gif" height="40" border="0" width="373">
</noscript>

<div class="lpxcenterpageouter"><div class="lpxcenterpageinner"><div style="position: absolute; top: 0px; left: 149px; width: 901px; height: 100px; z-index: 0;" id="element33">

<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '65px')" onMouseout="delayhidemenu()">Baby</a> |

<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2, '165px')" onMouseout="delayhidemenu()">Books</a> |

<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu3, '75px')" onMouseout="delayhidemenu()">Candles</a> |

<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu4, '135px')" onMouseout="delayhidemenu()">Dept 56</a> |

<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu5, '190px')" onMouseout="delayhidemenu()">Figurines</a> |

<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu6, '150px')" onMouseout="delayhidemenu()">Handbags</a> |

<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu7, '150px')" onMouseout="delayhidemenu()">Harley-Davidson</a> |

<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu8, '200px')" onMouseout="delayhidemenu()">Home Decor</a> |

<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu9, '150px')" onMouseout="delayhidemenu()">Souvenirs</a> |

<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu10, '150px')" onMouseout="delayhidemenu()">Webkinz</a>
</div>


</div>
</div>

</body></html>

Ron