[RESOLVED] Drop Down menu not going away in IE

**hlj71** · 08-10-2010 03:55 PM

Hello everyone! I have a an error happening on my site when I test it in IE (of course, it's only in IE). When I mouse over the main menu item, the drop down menu displays, as it should. Sometimes, when I mouse out, it doesn't go away. And then the other drop down menus won't go away either. It doesn't happen all the time, only some times, and only in IE. I am using some JavaScript for the IE site, but it's mostly CSS. It uses CSS only in Chrome/Firefox/Safari/etc. Below is a link to the site and you can find the links to the CSS/JavaScript files in the <head> tags.

Any help/suggestions would be great!! Even some on how to not use any JS for the IE side would be great too (although I'm not really too concerned with using JS for IE right now)!

http://www.aahanet.org/trendstoday/

**hlj71** · 08-11-2010 09:27 AM

So, I thought about this last night, and I guess what I am looking for is either a fix for the IE JavaScript or a way to not use JS at all. The drop down menus work great in Firefox/Chrome/Safari/Opera without the JS file, but I need the JS file for IE.

JS file: http://www.aahanet.org/trendstoday/include/dd_menu.js

The drop downs still stick in IE, mostly it seems when I switch tabs and then come back to it. Then when I roll over the menu item, the dd menu doesn't go away.

CSS Code snippet:

Code:

/**************************************************************
	Second Row: Begin Main Navigation/Rollovers
/*************************************************************/	
#secondNav {
	width:100%;
	float:left;
}
#nav2 {
	width:930px;
	height:30px;
    background:url(../graphics/menuMain2.png);
    margin:5px auto;
	padding:0;
    position:relative;
	list-style:none;
}
#nav2 li, #nav2 a {
    height:30px;
	display:block;
}
#nav2 li#newsNav {
	left: 0;
	width: 145px;
    margin: 0;
	padding: 0;
	list-style: none;
    position: absolute;
	display: block;
}
#nav2 li#pracManNav {
	left: 145px;
	width: 175px;
	top:0;
    margin: 0;
	padding: 0;
	list-style: none;
    position: absolute;
	display: block;
}
#nav2 li#toolsNav {
	left: 320px;
	width: 145px;
	top:0;
    margin: 0;
	padding: 0;
	list-style: none;
    position: absolute;
	display: block;
}
#nav2 li#newstatNav {
	left: 466px;
	width: 144px;
	top:0;
    margin: 0;
	padding: 0;
	list-style: none;
    position: absolute;
	display: block;
}
#nav2 li#shareStoriesNav {
	left: 611px;
	width: 174px;
	top:0;
    margin: 0;
	padding: 0;
	list-style: none;
    position: absolute;
	display: block;
}
#nav2 li#resourcesNav {
	left: 787px;
	width: 145px;
	top: 0;
    margin: 0;
	padding: 0;
	list-style: none;
    position: absolute;
	display: block;
}

/* Brings up hover image using Sprite method */
#nav2 #newsNav a:hover {background:transparent url(../graphics/menuMain2.png) 0 -30px no-repeat;}
#nav2 #pracManNav a:hover {background:transparent url(../graphics/menuMain2.png) -145px -30px no-repeat;}
#nav2 #toolsNav a:hover {background:transparent url(../graphics/menuMain2.png) -320px -30px no-repeat;}
#nav2 #newstatNav a:hover {background:transparent url(../graphics/menuMain2.png) -466px -30px no-repeat;}
#nav2 #shareStoriesNav a:hover {background:transparent url(../graphics/menuMain2.png) -611px -30px no-repeat;}
#nav2 #resourcesNav a:hover {background:transparent url(../graphics/menuMain2.png) -787px -30px no-repeat;}

/*	Drop Down menu items	*/

/*News Section*/
ul#dd_news {
	background:url(../graphics/ddNews.png) no-repeat bottom left;
	width:145px;
	list-style:none;
	padding:15px;
	position:absolute;
	text-align:left;
	font:normal 11px Arial, Helvetica, sans-serif;
}
li#newsNav ul#dd_news li {
	padding:0;
}
#nav2 li#newsNav ul#dd_news li a {
	height:auto;
	text-decoration:none;
	font-weight:bold;
	color:#000;
}
#nav2 li#newsNav ul#dd_news li a:hover {
	background:none;
	color:#003a63;
}
/* CSS that triggers the drop down effect*/
#nav2 li#newsNav ul#dd_news {
	left: -999em;
	position:absolute;
}
#nav2 li#newsNav:hover ul#dd_news {left: auto;}

/*Practice Management Section*/
ul#dd_pracMan {
	background:url(../graphics/ddPracMan.png) no-repeat bottom left;
	width:176px;
	list-style:none;
	padding:15px;
	position:absolute;
	text-align:left;
	font:normal 11px Arial, Helvetica, sans-serif;
}
li#pracManNav ul#dd_pracMan li {
	padding:0;
}
#nav2 li#pracManNav ul#dd_pracMan li a {
	height:auto;
	text-decoration:none;
	font-weight:bold;
	color:#000;
}
#nav2 li#pracManNav ul#dd_pracMan li a:hover {
	background:none;
	color:#003a63;
}
/* CSS that triggers the drop down effect*/
#nav2 li#pracManNav ul#dd_pracMan {
	left: -999em;
	position:absolute;
}
#nav2 li#pracManNav:hover ul#dd_pracMan {left: auto;}

/*Tools Section*/
ul#dd_tools {
	background:url(../graphics/ddTools.png) no-repeat bottom left;
	width:176px;
	list-style:none;
	padding:15px;
	position:absolute;
	text-align:left;
	font:normal 11px Arial, Helvetica, sans-serif;
}
li#toolsNav ul#dd_tools li {
	padding:0;
}
#nav2 li#toolsNav ul#dd_tools li a {
	height:auto;
	text-decoration:none;
	font-weight:bold;
	color:#000;
}
#nav2 li#toolsNav ul#dd_tools li a:hover {
	background:none;
	color:#003a63;
}
/* CSS that triggers the drop down effect*/
#nav2 li#toolsNav ul#dd_tools {
	left: -999em;
	position:absolute;
}
#nav2 li#toolsNav:hover ul#dd_tools {left: auto;}

**hlj71** · 08-11-2010 10:49 AM

So, I posted another thread asking about how to keep the light blue "caps" on the main menu item when I moved the mouse down to the drop down items. From this thread, I was advised to add the hover property to the li, not the a. I did this and it seems to have fixed my drop downs not going away problem too. Just wanted to share in case anyone else comes across similar issue.

Thanks!

Thread: [RESOLVED] Drop Down menu not going away in IE

Thread Tools

Display

[RESOLVED] Drop Down menu not going away in IE

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions