Multiple drop downs on single page

[funktifyknow]

I am looking to implement multiple drop downs on a single page. They must all be custom css-based drop downs and I am running into a bit of trouble getting it implemented, specifically getting the drop down to, well drop. I am using the js from the sitepoint book The Javascript Anthology.

I am going to attach my js and html. If anyone can help point me in the right direction it would be much appreciated.


--js--

var branch;

function dropdownMenu(navid)
{
  var isie = typeof document.all != 'undefined'
     && typeof window.opera == 'undefined'
     && navigator.vendor != 'KDE';

  if (typeof document.getElementById == 'undefined'
      || (navigator.vendor == 'Apple Computer, Inc.'
      && typeof window.XMLHttpRequest == 'undefined')
      || (isie && typeof document.uniqueID == 'undefined'))
  {
    return;
  }

  var rollover = new Image;
  rollover.src = 'right-red.gif';
  rollover = new Image;
  rollover.src = 'down-red.gif';

  var tree = document.getElementById(navid);
  if (tree)
  {
    branch = tree;
    var items = tree.getElementsByTagName('li');
    for (var i = 0; i < items.length; i++)
    {
      dropdownTrigger(tree, items[i], navid, isie);
    }
  }
}

function dropdownTrigger(tree, li, navid, isie)
{
  var opentime, closetime;
  var a = li.getElementsByTagName('a')[0];
  var menu = li.getElementsByTagName('ul').length > 0
      ? li.getElementsByTagName('ul')[0] : null;
  var horiz = tree.className.indexOf('horizontal') != -1;
  var issub = li.parentNode.id == navid;

  if (menu)
  {
    li.className += (li.className == '' ? '' : ' ') + 'hasmenu';
  }

  attachEventListener(li, 'mouseover', function(e)
  {
    if (unwantedTextEvent()) { return; }
    clearTimeout(closetime);
    if (branch == li) { branch = null; }

    a.className += (a.className == '' ? '' : ' ') + 'rollover';

    var target = typeof e.target != 'undefined' ? e.target : window.event.srcElement;
    while (target.nodeName.toUpperCase() != 'LI')
    {
      target = target.parentNode;
    }
    if (target != li) { return; }

    if (menu)
    {
      opentime = window.setTimeout(function()
      {
        if (branch)
        {
          clearMenus(branch);
          branch = null;
        }

        menu.style.left = horiz
            ? (isie ? li.offsetLeft + 'px' : 'auto')
            : '0';

        menu.style.top = horiz && issub
            ? (isie ? a.offsetHeight + 'px' : 'auto')
            : (isie ? li.offsetTop + 'px' : '0');

        repositionMenu(menu);

        if (typeof document.uniqueID != 'undefined')
        {
          createIframeLayer(menu);
        }
      }, 250);
    }
  }, false);

  attachEventListener(li, 'mouseout', function(e)
  {
    if (unwantedTextEvent()) { return; }

    var related = typeof e.relatedTarget != 'undefined' ? e.relatedTarget : window.event.toElement;
    if (!li.contains(related))
    {
      clearTimeout(opentime);
      branch = li;

      a.className = a.className.replace(/ ?rollover/g, '');
      if (menu)
      {
        closetime = window.setTimeout(function()
        {
          menu.style.left = '-100em';

          if (toggleSelects('visible') && tree.contains(related))
          {
            toggleSelects('hidden');
          }
          else
          {
            removeIframeLayer(menu);
          }

        }, 600);
      }
    }
  }, false);

  if (!isie)
  {
    li.contains = function(node)
    {
      if (node == null) { return false; }
      if (node == this) { return true; }
      else { return this.contains(node.parentNode); }
    };
  }
}

function clearMenus(root)
{
  var menus = root.getElementsByTagName('ul');
  for (var i = 0; i < menus.length; i++)
  {
    menus[i].style.left = '-100em';
    removeIframeLayer(menus[i]);
  }
}

function unwantedTextEvent()
{
  return (navigator.vendor == 'Apple Computer, Inc.'
      && (event.target == event.relatedTarget.parentNode
      || (event.eventPhase == 3
      && event.target.parentNode == event.relatedTarget)));
}

function getRoughPosition(ele, dir)
{
  var pos = dir == 'x' ? ele.offsetLeft : ele.offsetTop;
  var tmp = ele.offsetParent;
  while (tmp != null)
  {
    pos += dir == 'x' ? tmp.offsetLeft : tmp.offsetTop;
    tmp = tmp.offsetParent;
  }
  return pos;
}

function getViewportSize()
{
  var size = [0,0];

  if (typeof window.innerWidth != 'undefined')
  {
    size = [
        window.innerWidth,
        window.innerHeight
    ];
  }
  else if (typeof document.documentElement != 'undefined'
      && typeof document.documentElement.clientWidth != 'undefined'
      && document.documentElement.clientWidth != 0)
  {
    size = [
        document.documentElement.clientWidth,
        document.documentElement.clientHeight
    ];
  }
  else
  {
    size = [
        document.getElementsByTagName('body')[0].clientWidth,
        document.getElementsByTagName('body')[0].clientHeight
    ];
  }

  return size;
}

function repositionMenu(menu)
{
  var extent = [
      getRoughPosition(menu, 'x') + menu.offsetWidth + 25,
      getRoughPosition(menu, 'y') + menu.offsetHeight + 25
  ];
  var viewsize = getViewportSize();

  if (extent[0] > viewsize[0])
  {
    var offset = menu.offsetWidth
        + menu.parentNode.parentNode.offsetWidth;
    var inset = menu.parentNode.offsetWidth
        - menu.offsetLeft;

    menu.style.left = (0 - offset + (inset * 2)) + 'px';
  }

  if (extent[1] > viewsize[1])
  {
    var current = parseInt(menu.style.top, 10);
    var difference = extent[1] - viewsize[1];

    menu.style.top = (current - difference) + 'px';
  }
}

function createIframeLayer(menu)
{
  if (!toggleSelects('hidden'))
  {
    var layer = document.createElement('iframe');
    layer.tabIndex = '-1';
    layer.src = 'javascript:false;';
    menu.parentNode.appendChild(layer);

    layer.style.left = menu.offsetLeft + 'px';
    layer.style.top = menu.offsetTop + 'px';
    layer.style.width = menu.offsetWidth + 'px';
    layer.style.height = menu.offsetHeight + 'px';
  }
}

function removeIframeLayer(menu)
{
  if (!toggleSelects('visible'))
  {
    var layers = menu.parentNode.getElementsByTagName('iframe');
    while (layers.length > 0)
    {
      layers[0].parentNode.removeChild(layers[0]);
    }
  }
}

function toggleSelects(vis)
{
  if (typeof document.uniqueID != 'undefined'
      && typeof document.body.style.scrollbarTrackColor == 'undefined')
  {
    var selects = document.getElementsByTagName('select');
    for (var i = 0; i < selects.length; i++)
    {
      selects[i].style.visibility = vis;
    }

    return true;
  }

  return false;
}

function attachEventListener(target, eventType, functionRef, capture)
{
  if (typeof target.addEventListener != 'undefined')
  {
    target.addEventListener(eventType, functionRef, capture);
  }
  else if (typeof target.attachEvent != 'undefined')
  {
    target.attachEvent('on' + eventType, functionRef);
  }
  else
  {
    eventType = 'on' + eventType;

    if (typeof target[eventType] == 'function')
    {
      var oldListener = target[eventType];

      target[eventType] = function()
      {
        oldListener();

        return functionRef();
      }
    }
    else
    {
      target[eventType] = functionRef;
    }
  }

  return true;
}

function addLoadListener(fn)
{
  if (typeof window.addEventListener != 'undefined')
  {
    window.addEventListener('load', fn, false);
  }
  else if (typeof document.addEventListener != 'undefined')
  {
    document.addEventListener('load', fn, false);
  }
  else if (typeof window.attachEvent != 'undefined')
  {
    window.attachEvent('onload', fn);
  }
  else
  {
    var oldfn = window.onload;
    if (typeof window.onload != 'function')
    {
      window.onload = fn;
    }
    else
    {
      window.onload = function()
      {
        oldfn();
        fn();
      };
    }
  }
}

addLoadListener(function() { dropdownMenu('pmNavigation, vesNavigation, dateNavigation, hscNavigation'); });

--html/css--

<!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>
      <title>EDSS Top Ten Repairs Log</title>
      <style>
	  html, body { margin: 0px; border: 0px; padding: 0px;  width: 100%; }	

* { font-family: Verdana; font-size: 11px; }

/* for all browsers that understand min-width */
.width {width:100%; min-width: 600px;}

/* the bodge for IE6 browsers */
* html .minwidth {border-left:600px solid #fff; position:relative; float:left; z-index:1;}
* html .container {margin-left:-600px; position:relative; float:left; z-index:2;}



#header { background-color: #FFF; height: 28px; overflow: hidden; } 

#header * label { font-weight: bold; margin: 0px 4px; overflow: hidden;} 

#header * .select {
	margin: 4px; 
	vertical-align: middle; 
	border: 1px inset; 
	background-color: #FFF; 
	height: 16px; 
	line-height: 16px; 
	overflow: hidden;
	}

#header * .arrow {
	float: right; 
	width: 14px; 
	border: 1px outset; 
	background-color: #b79327; 
	border-left: 1px solid #765b07; 
	border-top: 1px solid #765b07; 
	border-right: 1px solid #f3d989; 
	border-bottom: 1px solid #f3d989; 
	height: 14px; 
	margin-top: 1px; 
	line-height: 14px; 
	font-size: 0.9em; 
	text-align: center; 
	}

#pmContainer, #vesselContainer, #dateContainer, #hscContainer, #applyContainer { 
	height: 28px;
	float: left;
	overflow: hidden;
}

#pmContainer {
	background-color: #FFF;
	width: 102px;
	overflow: hidden;
}
#pmContainer .select {
	background-color: #FFFBCA;
	margin-left: 36px;
	overflow: hidden;
}

#pmContainer ul{
 	background-color: #FFFBCA;
	margin-left: 36px;
	overflow: hidden;
	}

#pmContainer label {
	position: relative;
	top: -21px;
	overflow: hidden;
}

#vesselContainer {
	background-color: #FFF;
	overflow: hidden;
}

#vesselContainer .select {
	background-color: #FFFBCA;
	margin-left: 60px;
	overflow: hidden;
}
#vesselContainer label {
	position: relative;
	top: -21px;
	overflow: hidden;
}

#vesselContainer ul {
	background-color: #FFFBCA;
	margin-left: 162px;
	overflow: hidden;
}

#dateContainer {
	width: 240px;
	overflow: hidden;
}

#dateContainer .select {
	background-color: #FFFBCA;
	margin-left: 90px;
	overflow: hidden;
}

#dateContainer label {
	position: relative;
	top: -21px;
	z-index: 5;
	overflow: hidden;
}

#hscContainer {
	background-color: #FFF;
	overflow: hidden;
}

#hscContainer .select {
	background-color: #FFFBCA;
	margin-right: 88px;
	overflow: hidden;
}
#hscContainer button {
	width: 75px;
	margin: 4px;
	position: absolute;
	top: 0px;
	right: 0px;
	overflow: hidden;
	}

#applyContainer {
	background-color: #FFF;
	width: 83px;
	overflow: hidden;
}

#left { 
	width: 37.5%; 
	float: left; 
	}

#right { 
	width: 61.5%; 
	float: left; 
	}

#pmNavigation {
	height: 16px;
	vertical-align: middle;
	line-height: 16px;
	margin: 5px; 
	top: 1px;
	width: 43px;
	}

#vesNavigation {
	height: 17px;
	vertical-align: middle; 
	line-height: 17px;
	margin: 5px;
	top: 1px;
	height: 80%;
	overflow: scroll;
	}

#dateNavigation {
	
	}
	
#hscNavigation{

	}	

#maincontent{
	position: relative;
	background: #fff;
	clear: both;
	}

/*dropdown*/

/* structural styles and offsets */
ul.horizontal, ul.horizontal li, ul.horizontal ul {
	list-style-type: none;
	font-size: 1em;
	margin: 0;
	padding: 0;
	}

ul.horizontal {
  position: absolute;
  left: 1px;
  width: 100%;
  cursor: default;
  z-index: 2000;
}

ul.horizontal li {
  width: auto;
  float: left;
  position: relative;
  cursor: pointer;
  cursor: hand;
  text-align: left;
  left: 1em;
  margin: 0 0 0 -0.1em;
	}

* html ul.horizontal li {
  margin: 0;
  left: 0;
}

ul.horizontal ul {
	z-index: 2020;
	padding: 0;
	cursor: default;
	position: absolute;
	left: -100em;
	top: auto;
	width: 8.2em;
	margin: 0 0 0 0;
	padding: 1px 0 0 0;
	}

ul.horizontal ul li {
	width: 8.2em;
	float: left;
	left: auto;
	margin: -1px 0 0 0;
	}

/* design styles */
ul.horizontal ul {
	border-width: 1px;
	border-style: solid;
	border-color: #ffeca7 #a97741 #a97741 #ffeca7;
	}

ul.horizontal a, ul.horizontal a:visited {
	display: block;
	cursor: pointer;
	cursor: hand;
	padding-left: 5px;
	font: normal bold 1em verdana;
	color: #000;
	text-decoration: none;
	letter-spacing: 1px;
	height: 16px;
	}

ul.horizontal a:hover, ul.horizontal a:focus, ul.horizontal a:active{
	background: #A0C5F1;
	color: #000;
	}
ul.horizontal a, ul.horizontal a:visited {
  display: block;
  cursor: pointer;
  cursor: hand;
  background: #ffc;
  padding: 0 5px 0 5px;
  font: normal normal bold 1em verdana;
  color: #000;
  text-decoration: none;
  letter-spacing: 1px;
}

ul.horizontal a:hover, ul.horizontal a:focus, ul.horizontal a:active,
ul.horizontal a.rollover:link, ul.horizontal a.rollover:visited {
  background: #A0C5F1;
  color: #000;
}

/* browser hacks */
ul.horizontal a { float: left; }
@media Screen, Projection { ul.horizontal a { float: none; } }
ul.horizontal ul a { float: none !important; }
@media screen, projection {
  * html ul.horizontal li {
    display: inline;
    f\loat: left;
    background: #fff;
  }
}
* html ul.horizontal li { position: static; }
* html ul.horizontal a { position: relative; }

/* iframe layer */
ul iframe {
  position: absolute;
  z-index: 1010;
  border: none;
}

/*classes*/
.innertube{
	width: 100%;
	}

.select {
	border: 1px solid #E1D972;
	}
			
/*html elements*/

		
	  </style>
      <script type="text/javascript" language="javascript" src="/cms/content/controller/cms/FusionCharts.js"></script>
      <script type="text/javascript" language="javascript" src="/cms/content/controller/cms/updateTopTenRepairs.js"></script>
	  <script type="text/javascript" language="javascript" src="dropdownMenu.js"></script>
      <script type="text/javascript" language="javascript">
      var ChartId = "chart";
      var ChartData = "/cms/content/controller/cms/Data.xml";
      </script>
</head>
<body>
<div id="topsection" class="width">
	<div id="wrapper" class="minwidth">
		<div id="header" class="container">
			<div id="left">
				<div id="pmContainer">
					<div class="select">
						<ul id="pmNavigation" class="horizontal">
								<li><a href="#">All</a></li>
									<ul>
										<li><a>PM 1</a></li>
										<li><a>PM 2</a></li>
										<li><a>PM 3</a></li>
										<li><a>PM 4</a></li>
										<li><a>PM 5</a></li>
									</ul>
							</ul>		
						<div class="arrow"></div>
					</div>
					<label>PM:</label>
				</div>
				<div id="vesselContainer">
					<div class="select">
						<!--<ul id="vesNavigation" class="horizontal">
							<li><a href="#">Fleet</a></li>
								<ul>
									<li><a href="#">Class</a></li>
									<li><a href="#">Ship Designator</a></li>
									<li><a href="#">Ship Designator</a></li>
									<li><a href="#">Ship Designator</a></li>
									<li><a href="#">Ship Designator</a></li>
									<li><a href="#">Class</a></li>
									<li><a href="#">Ship Designator</a></li>
									<li><a href="#">Ship Designator</a></li>
									<li><a href="#">Ship Designator</a></li>
									<li><a href="#">Ship Designator</a></li>
									<li><a href="#">Ship Designator</a></li>
									<li><a href="#">Ship Designator</a></li>
									<li><a href="#">Ship Designator</a></li>
									<li><a href="#">Ship Designator</a></li>
									<li><a href="#">Ship Designator</a></li>
									<li><a href="#">Ship Designator</a></li>
									<li><a href="#">Ship Designator</a></li>
									<li><a href="#">Ship Designator</a></li>
									<li><a href="#">Ship Designator</a></li>
									<li><a href="#">Ship Designator</a></li>
									<li><a href="#">Ship Designator</a></li>
									<li><a href="#">Ship Designator</a></li>
									<li><a href="#">Ship Designator</a></li>
									<li><a href="#">Ship Designator</a></li>
									<li><a href="#">Ship Designator</a></li>
								</ul>
						</ul> -->
						<div class="arrow"></div>
					</div>
					<label>Vessel:</label>
				</div>
			</div>
			<div id="right">
				<div id="dateContainer">
					<div class="select">
						<ul id="dateNavigation" class="horizontal">
							<li></li>
						</ul>				
						<div class="arrow"></div>
					</div>
					<label>Date Range:</label>
				</div>
				<div id="hscContainer">
					<div class="select">
						<ul id="hscNavigation" class="horizontal">
							<li></li>
						</ul>
						<div class="arrow">...</div>
					</div>
					<button>Apply</button>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- graph content area -->
<div id="maincontent">
	<div class="innertube">
		<div id="chartWrapper">
				     		
		</div>
	</div>
</div>

		
		<a href="#" id="cmslink" target="cmswebinterface"></a>
   </body>
</html>

[Raffles]

That's an enormous wall of code.

I think you'd be best advised to do a Google search on "suckerfish".

[funktifyknow]

lol sorry you are right. I found a much easier way to get it done. I made it infinately more difficult than i needed to. all i needed to do was create 2 simple function in the header and call it in each ul. i should post the code in case someone else has a question. so here it is.

	function openMenu(id){
	  	document.getElementById(id).style.display="block";
		}
	function closeMenu(id){
		document.getElementById(id).style.display="none";
		}

and the call for a mouse event on a button

div class="arrow" onclick="openMenu('pmInnerNav');" onblur="closeMenu('pmInnerNav');"