Getting a dropdown menu to drop UP!

Ive adapted a drop-down menu to suit my needs, but need the submenu options to appear above the links, not below. Ive tried editing the CSS in this example but cannot get the boxes to appear above. Any ideas?

(sorry on intranet site so unable to provide link - basic source code from page below)

Many Thanks

#dropmenudiv{
position:absolute;
border:1px black solid;
font:normal 12px/18px Verdana;
z-index:100;
; clip: rect( ); height: 50px}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
; clip: rect( )}

#dropmenudiv a:hover{ /*hover background color*/
background-color: #D5FFFF;
}

</style>
<script type="text/javascript">

//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href="http://intralink/1/csa/bu/mbu/index.asp">MBU</a>'
menu1[1]='<a href="http://intralink/1/csa/bu/sebu/index.asp">SEBU</a>'
menu1[2]='<a href="http://intralink/1/csa/bu/swbu/index.asp">SWBU</a>'

//Contents for menu 2, and so on
var menu2=new Array()
menu2[0]='<a href="http://intralink/1/csa/bu/mbu/social/index.asp">MBU Social</a>'
menu2[1]='<a href="http://intralink/1/csa/bu/sebu/teams/sebuteams/second/dwp_m124820.asp">SEBU Social</a>'
menu2[2]='<a href="http://intralink/1/csa/bu/swbu/index.asp">SWBU Social</a>'

var menuwidth='100px' //default menu width
var menubgcolor='lightyellow' //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=-500
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 windowedge=ie4 &&!window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
}
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>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<p> </p>
<p> </p>
<p><a href="default.htm" onClick="return clickreturnvalue()" onMouseOver="dropdownmenu(this, event, menu1, '100px')" onMouseOut="delayhidemenu()">Homepages</a>
¦ <a href="default2.htm" onClick="return clickreturnvalue()" onMouseOver="dropdownmenu(this, event, menu2, '100px')" onMouseOut="delayhidemenu()">Social</a>
</p>
</body>
</html>

Getting a dropdown menu to drop UP!

getting a drop down menu to drop up

Johnski

gph

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week