thelink12
asked on
CSS drop-down menu not closing on mouseout
Please see below code.
This CSS drop-down menu system works great in Firefox, however in IE7, if you click somewhere in the body text, then hover the menu system, the drop-downs do not close on mouse-out.
This CSS drop-down menu system works great in Firefox, however in IE7, if you click somewhere in the body text, then hover the menu system, the drop-downs do not close on mouse-out.
ASKER
CSS
**************************
/* Navigation Menu */
#nav, #nav ul {
float: left;
width: 100%;
list-style: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
padding: 0;
margin: 0 0 0 0;
z-index: 500;
position: relative;
}
#nav a {
display: block;
width: 64px;
background: #9dbac1;
color: #003366;
text-decoration: none;
padding: 0.25em 1.5em;
}
#nav a:hover {
color: #ffffff;
background-color: #B3C9CE;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 156px;
text-align: left;
font-weight: normal;
padding-top: 10px;
padding-bottom: 0px;
background-color: #B3C9CE;
}
#nav li li {
padding-right: 0;
width: 120px;
}
#nav li ul a {
background-color:#B3C9CE;
width: 120px;
height: auto;
padding-top: 5px;
padding-bottom: 5px;
font-weight: bold;
font-size: 11px;
background-image: url(images/nav_dots.gif);
background-repeat: repeat-x;
background-position: top;
vertical-align: middle;
}
#nav li ul ul {
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.apHover ul ul, #nav li.apHover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.apHover ul, #nav li li.apHover ul, #nav li li li.apHover ul {
left: auto;
}
**************************
/* Navigation Menu */
#nav, #nav ul {
float: left;
width: 100%;
list-style: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
padding: 0;
margin: 0 0 0 0;
z-index: 500;
position: relative;
}
#nav a {
display: block;
width: 64px;
background: #9dbac1;
color: #003366;
text-decoration: none;
padding: 0.25em 1.5em;
}
#nav a:hover {
color: #ffffff;
background-color: #B3C9CE;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 156px;
text-align: left;
font-weight: normal;
padding-top: 10px;
padding-bottom: 0px;
background-color: #B3C9CE;
}
#nav li li {
padding-right: 0;
width: 120px;
}
#nav li ul a {
background-color:#B3C9CE;
width: 120px;
height: auto;
padding-top: 5px;
padding-bottom: 5px;
font-weight: bold;
font-size: 11px;
background-image: url(images/nav_dots.gif);
background-repeat: repeat-x;
background-position: top;
vertical-align: middle;
}
#nav li ul ul {
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.apHover ul ul, #nav li.apHover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.apHover ul, #nav li li.apHover ul, #nav li li li.apHover ul {
left: auto;
}
ASKER
Javascript
**************************
// JavaScript Document
<!--
apHover = function() {
var els = document.getElementById("n
for (var i=0; i<els.length; i++) {
els[i].onmouseover=functio
this.className+=" apHover";
}
els[i].onmouseout=function
// this.className=this.classN
this.className=this.classN
}
}
}
//-->
**************************
// JavaScript Document
<!--
apHover = function() {
var els = document.getElementById("n
for (var i=0; i<els.length; i++) {
els[i].onmouseover=functio
this.className+=" apHover";
}
els[i].onmouseout=function
// this.className=this.classN
this.className=this.classN
}
}
}
//-->
Hmmm, there seems nothing wrong with all those parts. If I may be so bold, may I suggest replacing that particular javascripted solution with this solution:
http://www.xs4all.nl/~peterned/csshover.html
It has not failed me yet and it happily leaves IE7 alone in cases such as this, IE7 doesn't need the javascript to function.
As an alternate solution you could go for conditional comments to exclude IE7 from getting scripted. I would personaly not want to fix this particular bug, I'd rather prevent it as the browser's build-in code for :hover support is usually faster and more reliable :)
Wrap your script inclusion in this comment:
<!--[if lt IE 7]>
<script src="......" type="text/javascript"> </script>
<![endif]-->
And IE7 as well as all non-IE browsers will happily ignore the script altogether!
My two cents,
Martin
http://www.xs4all.nl/~peterned/csshover.html
It has not failed me yet and it happily leaves IE7 alone in cases such as this, IE7 doesn't need the javascript to function.
As an alternate solution you could go for conditional comments to exclude IE7 from getting scripted. I would personaly not want to fix this particular bug, I'd rather prevent it as the browser's build-in code for :hover support is usually faster and more reliable :)
Wrap your script inclusion in this comment:
<!--[if lt IE 7]>
<script src="......" type="text/javascript"> </script>
<![endif]-->
And IE7 as well as all non-IE browsers will happily ignore the script altogether!
My two cents,
Martin
ASKER
OK, I'm confuzed -
IE7 is NOT implementing standard :hover support for me, at least not for the sub menus - ?? Commenting out the current JavaScript causes submenus not to work.
Attempted to implement csshover solution - Had to comment out line filtering IE7 in .htc file or else menus wouldn't work at all. Now it works, but with same problem as originally - click on page and sub menus don't close.
If IE7 supports :hover on all elements now, I shouldn't need any of these solutions, right?
IE7 is NOT implementing standard :hover support for me, at least not for the sub menus - ?? Commenting out the current JavaScript causes submenus not to work.
Attempted to implement csshover solution - Had to comment out line filtering IE7 in .htc file or else menus wouldn't work at all. Now it works, but with same problem as originally - click on page and sub menus don't close.
If IE7 supports :hover on all elements now, I shouldn't need any of these solutions, right?
ASKER
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="test.css" />
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Langua
<meta name="description" content="" />
<meta name="keywords" content=""/>
<style>
body { behavior:url("csshover.htc
</style>
</head>
<body>
<!-- ****** Begin Menus ****** -->
<div id="nav">
<ul>
<li><a href="default.html">Home</
<li><a href="about.html">About</a
<ul>
<li><a href="about.html">Company Overview</a></li>
<li><a href="leadership.html">Com
<li><a href="offices.html">Office
</ul>
</li>
<li><a href="insight.html">Insigh
<ul>
<li><a href="whitepapers.html">Wh
<li><a href="presentations.html">
<li><a href="articles.html#archiv
<li><a href="publication.html">Pu
</ul>
</li>
<li><a href="news.html">News</a>
<ul>
<li><a href="pressreleases.html">
<li><a href="articles.html">Artic
<li><a href="pressmentions.html">
</ul>
</li>
</ul>
</div>
<!-- ***** End Main Menu ***** -->
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus nec neque a
erat pellentesque tincidunt. Fusce consequat, nulla non viverra euismod, ante
orci venenatis nibh, at suscipit felis sem sit amet urna. In euismod lacus ac
mauris. In vel felis et lacus mattis varius. Donec laoreet ullamcorper pede. Sed
sit amet leo in tellus tincidunt rhoncus. Ut sed augue non odio feugiat
condimentum. Curabitur quam turpis, luctus non, aliquam a, porttitor ac, orci.
Aenean facilisis pede suscipit quam. Aenean lectus odio, nonummy in, dapibus in,
ornare quis, augue. Nullam luctus nunc. Vivamus et odio. Suspendisse potenti.
Sed nulla sem, aliquet eu, dictum eget, lacinia in, velit. </p>
</div>
</body>
</html>
ASKER
<attach event="ondocumentready" handler="parseStylesheets"
<script>
/**
* Whatever:hover - V1.42.060206 - hover & active
* --------------------------
* (c) 2005 - Peter Nederlof
* Peterned - http://www.xs4all.nl/~peterned/
* License - http://creativecommons.org/licenses/LGPL/2.1/
*
* Whatever:hover is free software; you can redistribute it and/or
* modify it under the terms of the GNU Lesser General Public
* License as published by the Free Software Foundation; either
* version 2.1 of the License, or (at your option) any later version.
*
* Whatever:hover is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
* Lesser General Public License for more details.
*
* Credits and thanks to:
* Arnoud Berendsen, Martin Reurings, Robert Hanson
*
* howto: body { behavior:url("csshover.htc
* --------------------------
*/
var csshoverReg = /(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i,
currentSheet, doc = window.document, hoverEvents = [], activators = {
onhover:{on:'onmouseover',
onactive:{on:'onmousedown'
}
function parseStylesheets() {
/* if(!/MSIE (5|6)/.test(navigator.user
window.attachEvent('onunlo
var sheets = doc.styleSheets, l = sheets.length;
for(var i=0; i<l; i++)
parseStylesheet(sheets[i])
}
function parseStylesheet(sheet) {
if(sheet.imports) {
try {
var imports = sheet.imports, l = imports.length;
for(var i=0; i<l; i++) parseStylesheet(sheet.impo
} catch(securityException){}
}
try {
var rules = (currentSheet = sheet).rules, l = rules.length;
for(var j=0; j<l; j++) parseCSSRule(rules[j]);
} catch(securityException){}
}
function parseCSSRule(rule) {
var select = rule.selectorText, style = rule.style.cssText;
if(!csshoverReg.test(selec
var pseudo = select.replace(/[^:]+:([a-
var newSelect = select.replace(/(\.([a-z0-
var className = (/\.([a-z0-9_-]*on(hover|a
var affected = select.replace(/:(hover|ac
var elements = getElementsBySelect(affect
if(elements.length == 0) return;
currentSheet.addRule(newSe
for(var i=0; i<elements.length; i++)
new HoverElement(elements[i], className, activators[pseudo]);
}
function HoverElement(node, className, events) {
if(!node.hovers) node.hovers = {};
if(node.hovers[className])
node.hovers[className] = true;
hookHoverEvent(node, events.on, function() { node.className += ' ' + className; });
hookHoverEvent(node, events.off, function() { node.className = node.className.replace(new
}
function hookHoverEvent(node, type, handler) {
node.attachEvent(type, handler);
hoverEvents[hoverEvents.le
node:node, type:type, handler:handler
};
}
function unhookHoverEvents() {
for(var e,i=0; i<hoverEvents.length; i++) {
e = hoverEvents[i];
e.node.detachEvent(e.type,
}
}
function getElementsBySelect(rule) {
var parts, nodes = [doc];
parts = rule.split(' ');
for(var i=0; i<parts.length; i++) {
nodes = getSelectedNodes(parts[i],
} return nodes;
}
function getSelectedNodes(select, elements) {
var result, node, nodes = [];
var identify = (/\#([a-z0-9_-]+)/i).exec(
if(identify) {
var element = doc.getElementById(identif
return element? [element]:nodes;
}
var classname = (/\.([a-z0-9_-]+)/i).exec(
var tagName = select.replace(/(\.|\#|\:)
var classReg = classname? new RegExp('\\b' + classname[1] + '\\b'):false;
for(var i=0; i<elements.length; i++) {
result = tagName? elements[i].all.tags(tagNa
for(var j=0; j<result.length; j++) {
node = result[j];
if(classReg && !classReg.test(node.classN
nodes[nodes.length] = node;
}
}
return nodes;
}
</script>
<script>
/**
* Whatever:hover - V1.42.060206 - hover & active
* --------------------------
* (c) 2005 - Peter Nederlof
* Peterned - http://www.xs4all.nl/~peterned/
* License - http://creativecommons.org/licenses/LGPL/2.1/
*
* Whatever:hover is free software; you can redistribute it and/or
* modify it under the terms of the GNU Lesser General Public
* License as published by the Free Software Foundation; either
* version 2.1 of the License, or (at your option) any later version.
*
* Whatever:hover is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
* Lesser General Public License for more details.
*
* Credits and thanks to:
* Arnoud Berendsen, Martin Reurings, Robert Hanson
*
* howto: body { behavior:url("csshover.htc
* --------------------------
*/
var csshoverReg = /(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i,
currentSheet, doc = window.document, hoverEvents = [], activators = {
onhover:{on:'onmouseover',
onactive:{on:'onmousedown'
}
function parseStylesheets() {
/* if(!/MSIE (5|6)/.test(navigator.user
window.attachEvent('onunlo
var sheets = doc.styleSheets, l = sheets.length;
for(var i=0; i<l; i++)
parseStylesheet(sheets[i])
}
function parseStylesheet(sheet) {
if(sheet.imports) {
try {
var imports = sheet.imports, l = imports.length;
for(var i=0; i<l; i++) parseStylesheet(sheet.impo
} catch(securityException){}
}
try {
var rules = (currentSheet = sheet).rules, l = rules.length;
for(var j=0; j<l; j++) parseCSSRule(rules[j]);
} catch(securityException){}
}
function parseCSSRule(rule) {
var select = rule.selectorText, style = rule.style.cssText;
if(!csshoverReg.test(selec
var pseudo = select.replace(/[^:]+:([a-
var newSelect = select.replace(/(\.([a-z0-
var className = (/\.([a-z0-9_-]*on(hover|a
var affected = select.replace(/:(hover|ac
var elements = getElementsBySelect(affect
if(elements.length == 0) return;
currentSheet.addRule(newSe
for(var i=0; i<elements.length; i++)
new HoverElement(elements[i], className, activators[pseudo]);
}
function HoverElement(node, className, events) {
if(!node.hovers) node.hovers = {};
if(node.hovers[className])
node.hovers[className] = true;
hookHoverEvent(node, events.on, function() { node.className += ' ' + className; });
hookHoverEvent(node, events.off, function() { node.className = node.className.replace(new
}
function hookHoverEvent(node, type, handler) {
node.attachEvent(type, handler);
hoverEvents[hoverEvents.le
node:node, type:type, handler:handler
};
}
function unhookHoverEvents() {
for(var e,i=0; i<hoverEvents.length; i++) {
e = hoverEvents[i];
e.node.detachEvent(e.type,
}
}
function getElementsBySelect(rule) {
var parts, nodes = [doc];
parts = rule.split(' ');
for(var i=0; i<parts.length; i++) {
nodes = getSelectedNodes(parts[i],
} return nodes;
}
function getSelectedNodes(select, elements) {
var result, node, nodes = [];
var identify = (/\#([a-z0-9_-]+)/i).exec(
if(identify) {
var element = doc.getElementById(identif
return element? [element]:nodes;
}
var classname = (/\.([a-z0-9_-]+)/i).exec(
var tagName = select.replace(/(\.|\#|\:)
var classReg = classname? new RegExp('\\b' + classname[1] + '\\b'):false;
for(var i=0; i<elements.length; i++) {
result = tagName? elements[i].all.tags(tagNa
for(var j=0; j<result.length; j++) {
node = result[j];
if(classReg && !classReg.test(node.classN
nodes[nodes.length] = node;
}
}
return nodes;
}
</script>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Looks good. Excellent work.
Thanks.
Thanks.
ASKER
**************************
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="test.css" />
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Langua
<meta name="description" content="" />
<meta name="keywords" content=""/>
<script src="mouseover.js" type="text/javascript"></s
<script src="run_animation.js" type="text/javascript"></s
</head>
<body onload="apHover()">
<!-- ****** Begin Menus ****** -->
<div id="nav">
<ul>
<li><a href="default.html">Home</
<li><a href="about.html">About</a
<ul>
<li><a href="about.html">Company Overview</a></li>
<li><a href="leadership.html">Com
<li><a href="offices.html">Office
</ul>
</li>
<li><a href="insight.html">Insigh
<ul>
<li><a href="whitepapers.html">Wh
<li><a href="presentations.html">
<li><a href="articles.html#archiv
<li><a href="publication.html">Pu
</ul>
</li>
<li><a href="news.html">News</a>
<ul>
<li><a href="pressreleases.html">
<li><a href="articles.html">Artic
<li><a href="pressmentions.html">
</ul>
</li>
</ul>
</div>
<!-- ***** End Main Menu ***** -->
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus nec neque a
erat pellentesque tincidunt. Fusce consequat, nulla non viverra euismod, ante
orci venenatis nibh, at suscipit felis sem sit amet urna. In euismod lacus ac
mauris. In vel felis et lacus mattis varius. Donec laoreet ullamcorper pede. Sed
sit amet leo in tellus tincidunt rhoncus. Ut sed augue non odio feugiat
condimentum. Curabitur quam turpis, luctus non, aliquam a, porttitor ac, orci.
Aenean facilisis pede suscipit quam. Aenean lectus odio, nonummy in, dapibus in,
ornare quis, augue. Nullam luctus nunc. Vivamus et odio. Suspendisse potenti.
Sed nulla sem, aliquet eu, dictum eget, lacinia in, velit. </p>
</div>
</body>
</html>