Question regarding drop down menu

**jlisec01** · Jun 7, 2007 12:28

Hello everyone, I been having some problems generating my drop down menu to work in ie, but it works fine in Firefox.

I pasted my css coding below, even though the drop down menu does contain javascript I didn't know what forum to post it in. '

Bascially when I wanna make the menu bar larger in height, I can do that by setting the div menu bar to height: 17px, but when you hover over one of the links the background color only goes half way down in ie, setting the height doesnt make the rollover extend, anyone can help me?

the hover is the background behind the link that goes half way, when you set a height.

if you wanna try it yourself ill post the javascript to see the actual problem, I feel the css can fix it tho thanks.

Code CSS:

body {
	margin: 0px;
	padding: 0px;
}
 
#page {
	margin: 10px;
}
 
#menuBar {
	color: #999999;
	font-size: 12px;
	font-family: arial, Helvetica, sans-serif;
	font-weight: bold;
	text-align: left;
	text-transform: capitalize;
	display: block;
	margin-bottom: 5px;
	position: relative;
	top: 0px;
	left: 0px;
	right: 0px;
	width: 99%;
        height: 17px;
	overflow: hidden;
	vertical-align: middle;
	border: solid 1px #000000;
	background-color: #cccccc;
	}
 
.menuHeader {
	color: #000000;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	padding: 5px;
	margin: 0px;
	padding-right: 15px;
	display: inline;
	position: relative;
	border-right: 1px solid #000000;
	}
 
a.menuLink {
	display: block;
	padding: 2px 5px;
	border-top: 1px solid #cccccc
	}
 
a.menuLink:link {
	color: #000000;
	text-decoration: none
	}
 
a.menuLink:visited {
	color: #000000;
	text-decoration: none
	}
 
a.menuLink:hover {
	color: #fff;
	background-color: #000000;
	text-decoration: none
	}
 
a.menuLink:active {
	color: #ffffff;
	text-decoration: none;
	background-color: #cc0000;
	}
 
.menuDrop {
	color: #999999;
	font-size: 10px;
	font-family: arial, Helvetica, sans-serif;
	background-color: #ffffff;
	background-repeat: repeat;
	visibility: hidden;
	margin: 0;
	padding: 0;
	position: absolute;
	z-index: 1000;
	top: 60px;
	left: 0;
	width: 175px;
	height: auto;
	border-style: solid;
	border-width: 0 1px 1px;
	border-color: #003365
	}

Code JavaScript:

<script language="JavaScript" type="text/javascript">
			var objNavMenu = null;
			var prevObjNavMenu = null;
			var prevObjDropMenu = null;
			var numDropMenu = 3;
			////// link styles
			var bgLinkColor = '#cccccc';
			var bgLinkHover = '#fff'
			var bgLinkActive = '#000000'
			var linkColor = '#000000'
			var linkHover = '#000000'
			var linkActive = '#ffffff'
 
			var isIE = null;
			if (navigator.appName.indexOf('Microsoft Internet Explorer') != -1) isIE=1;
 
			function initDropMenu () {
				document.onclick = hideDropMenu;
				for (i=1; i<=numDropMenu; i++) {
					menuName = 'dropMenu' + i;
					navName = 'navMenu' + i;
					objDropMenu = document.getElementById(menuName);
					objNavMenu = document.getElementById(navName);
					objDropMenu.style.visibility = 'hidden';
					objNavMenu.onmouseover =  menuHover;
					objNavMenu.onmouseout = menuOut;
					objNavMenu.onclick = showDropMenu;
				}
				objNavMenu = null;
				return;
			}
 
			function  menuHover(e) {
				document.onclick = null;
				hoverObjNavMenu = document.getElementById(this.id);
				if (hoverObjNavMenu != objNavMenu) {
					hoverObjNavMenu.style.color = linkHover;
					hoverObjNavMenu.style.backgroundColor = bgLinkHover;
				}		
			}
 
			function menuOut (e) {
				document.onclick = hideDropMenu;
				outObjNavMenu = document.getElementById(this.id);
				if (outObjNavMenu != objNavMenu) {
					outObjNavMenu.style.color = linkColor;
					outObjNavMenu.style.backgroundColor = bgLinkColor;
				}
			}
 
			function showDropMenu(e) {
				menuName = 'drop' + this.id.substring(3,this.id.length);
				objDropMenu = document.getElementById(menuName);
				if (prevObjDropMenu == objDropMenu) {
						hideDropMenu();
					return;
				}
				if (prevObjDropMenu != null) hideDropMenu();
				objNavMenu = document.getElementById(this.id);
				if ((prevObjNavMenu != objNavMenu ) || (prevObjDropMenu == null)) {
					objNavMenu.style.color = linkActive;
					objNavMenu.style.backgroundColor = bgLinkActive;
				}
 
				if (objDropMenu) {
					xPos = objNavMenu.offsetParent.offsetLeft + objNavMenu.offsetLeft;
					yPos = objNavMenu.offsetParent.offsetTop + objNavMenu.offsetParent.offsetHeight;
					if (isIE) {
						yPos -= 1;
						xPos -= 6;
					}
					objDropMenu.style.left = xPos + 'px';
					objDropMenu.style.top = yPos + 'px';
					objDropMenu.style.visibility = 'visible';
					prevObjDropMenu = objDropMenu;
					prevObjNavMenu = objNavMenu;
				}
 
			}
 
			function hideDropMenu() {
				document.onclick = null;
				if (prevObjDropMenu) {
					prevObjDropMenu.style.visibility = 'hidden';
					prevObjDropMenu = null;
					prevObjNavMenu.style.color = linkColor;
					prevObjNavMenu.style.backgroundColor = bgLinkColor;
				}
				objNavMenu = null;
			}