Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 416
  • Last Modified:

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.
0
thelink12
Asked:
thelink12
  • 7
  • 2
1 Solution
 
thelink12Author Commented:
HTML
**********************************************************************************************************************
<!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-Language" content="en-us" />
       <meta name="description" content="" />
       <meta name="keywords" content=""/>
<script src="mouseover.js" type="text/javascript"></script>
<script src="run_animation.js" type="text/javascript"></script>
</head>
<body onload="apHover()">
          <!-- ****** Begin Menus ****** -->
<div id="nav">
      <ul>      
            <li><a href="default.html">Home</a></li>
            <li><a href="about.html">About</a>
                        <ul>
                        <li><a href="about.html">Company Overview</a></li>
                        <li><a href="leadership.html">Company Leadership</a></li>
                        <li><a href="offices.html">Offices</a></li>
                        </ul>
            </li>
            <li><a href="insight.html">Insight</a>
                        <ul>
                        <li><a href="whitepapers.html">White Papers</a></li>
                        <li><a href="presentations.html">Presentations</a></li>
                        <li><a href="articles.html#archive">Archived Articles</a></li>
                        <li><a href="publication.html">Publications</a></li>
                        </ul>
            </li>
            <li><a href="news.html">News</a>
                        <ul>
                        <li><a href="pressreleases.html">Press Releases</a></li>
                        <li><a href="articles.html">Articles</a></li>
                        <li><a href="pressmentions.html">Press Mentions</a></li>
                        </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>
0
 
thelink12Author Commented:
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;  
}
0
 
thelink12Author Commented:
Javascript
*************************************************************************************************************************
// JavaScript Document
<!--

apHover = function() {
      var els = document.getElementById("nav").getElementsByTagName("LI");
      for (var i=0; i<els.length; i++) {
            els[i].onmouseover=function() {
                  this.className+=" apHover";
            }
            els[i].onmouseout=function() {
//                  this.className=this.className.replace(new RegExp(" apHover\\b"), "");
                  this.className=this.className.replace(new RegExp("( )?apHover\\b"), "");
            }
      }
}
//-->
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
mreuringCommented:
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
0
 
thelink12Author Commented:
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?  
0
 
thelink12Author Commented:

<!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-Language" content="en-us" />
       <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</a></li>
            <li><a href="about.html">About</a>
                        <ul>
                        <li><a href="about.html">Company Overview</a></li>
                        <li><a href="leadership.html">Company Leadership</a></li>
                        <li><a href="offices.html">Offices</a></li>
                        </ul>
            </li>
            <li><a href="insight.html">Insight</a>
                        <ul>
                        <li><a href="whitepapers.html">White Papers</a></li>
                        <li><a href="presentations.html">Presentations</a></li>
                        <li><a href="articles.html#archive">Archived Articles</a></li>
                        <li><a href="publication.html">Publications</a></li>
                        </ul>
            </li>
            <li><a href="news.html">News</a>
                        <ul>
                        <li><a href="pressreleases.html">Press Releases</a></li>
                        <li><a href="articles.html">Articles</a></li>
                        <li><a href="pressmentions.html">Press Mentions</a></li>
                        </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>
0
 
thelink12Author Commented:
<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', off:'onmouseout'},
      onactive:{on:'onmousedown', off:'onmouseup'}
}

function parseStylesheets() {
/*      if(!/MSIE (5|6)/.test(navigator.userAgent)) return; */
      window.attachEvent('onunload', unhookHoverEvents);
      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.imports[i]);
                  } 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(select) || !style) return;

            var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');
            var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);
            var className = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1];
            var affected = select.replace(/:(hover|active).*$/, '');
            var elements = getElementsBySelect(affected);
            if(elements.length == 0) return;

            currentSheet.addRule(newSelect, style);
            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]) return;
      node.hovers[className] = true;
      hookHoverEvent(node, events.on, function() { node.className += ' ' + className; });
      hookHoverEvent(node, events.off, function() { node.className = node.className.replace(new RegExp('\\s+'+className, 'g'),''); });
}
      function hookHoverEvent(node, type, handler) {
            node.attachEvent(type, handler);
            hoverEvents[hoverEvents.length] = {
                  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, e.handler);
            }
      }

function getElementsBySelect(rule) {
      var parts, nodes = [doc];
      parts = rule.split(' ');
      for(var i=0; i<parts.length; i++) {
            nodes = getSelectedNodes(parts[i], nodes);
      }      return nodes;
}
      function getSelectedNodes(select, elements) {
            var result, node, nodes = [];
            var identify = (/\#([a-z0-9_-]+)/i).exec(select);
            if(identify) {
                  var element = doc.getElementById(identify[1]);
                  return element? [element]:nodes;
            }
            
            var classname = (/\.([a-z0-9_-]+)/i).exec(select);
            var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');
            var classReg = classname? new RegExp('\\b' + classname[1] + '\\b'):false;
            for(var i=0; i<elements.length; i++) {
                  result = tagName? elements[i].all.tags(tagName):elements[i].all;
                  for(var j=0; j<result.length; j++) {
                        node = result[j];
                        if(classReg && !classReg.test(node.className)) continue;
                        nodes[nodes.length] = node;
                  }
            }      
            
            return nodes;
      }
</script>
0
 
mreuringCommented:
Sorry for coming back this late, I got swamped at work. I've tried to duplicate the problem you described. I've set up a test-case over here: http://www.windgazer.nl/eexchange/Q_22754581.html

As far as I can tell, there's nothing wrong with any of the code you've written, I don't particularly like moving the menu's in and out of sight so I've opted for changing that to using display: none/block. Incidentally, that might be why I can't get the behavioural problem you described.

Please try the link to the test-case and see if it all works correctly. It works with an unmodded version of whateverhover and IE7 doesn't choke on it (I even tested without having the .htc linked to make certain on my vow that IE7 does :hover out of the box!).

In case you need to know what I changed:
In your css you're using left:-999em to move your unused menu's out of sight. I replaced that with display: none and instead of left:auto to get them back, display: block;.
This causes a minor layout problem in IE7 and so I added a few more line. On the li's I added position:relative, this allows us to position the menu's in relation to the list-items. And on the ul's I've added top: 100%; left: 0;.

/**
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;
      position: relative;
}

#nav li ul {
      position: absolute;
      top: 100%;
      left: 0;
      display:none;  
      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 {
      display:none;
}

#nav li:hover ul,
#nav li li:hover ul,
#nav li li li:hover ul {
      display:block;  
}

Hope this helps,

 Martin
0
 
thelink12Author Commented:
Looks good. Excellent work.

Thanks.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 7
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now