li:hover IE6 RSS

• • Reply
  

  Triwis

  Member

  301 Points

  150 Posts

  li:hover IE6

  Jun 21, 2011 09:19 PM|LINK

  Hi,

  I have a css dropdown menu. It is working fine under most browser except IE6. I've searched a little and the problem could be cause by li:hover that is not working under IE6.

  If this is my problem, is there a simple workaround?

  Thanks

  • Edited by Triwis on Jun 21, 2011 09:21 PM
• • Reply
  

  Anton Palyok

  Contributor

  2526 Points

  404 Posts

  Re: li:hover IE6

  Jun 21, 2011 10:23 PM|LINK

  You can use javascript fix for IE.
  Something like this:

  function correctMenuIE6() {
          // if not IE then return
          if (navigator.appName != 'Microsoft Internet Explorer') return;
  
          // get all <li> of menu
          var nodes = document.getElementById("mainMenu").getElementsByTagName("li");
          
          // add some event handlers to menu items
          for (var i = 0; i < nodes.length; i++) {
              // on mouse over add class "hover"
              nodes[i].onmouseover = function () {
                  this.className += " hover";
              }
  
              // on mouse out remove class "hover"
              nodes[i].onmouseout = function () {
                  this.className = this.className.replace(" hover", "");
              }
          }
  }

  You should run this code on page load

• • Reply
  

  Triwis

  Member

  301 Points

  150 Posts

  Re: li:hover IE6

  Jun 22, 2011 07:58 PM|LINK

  Hi,

  it is partially working. The problem is I have a multiple-level dropdown menu. Something like:

  <ul>
      <li>xxxx</li>
      <li>xxxx</li>
      <ul>
          <li>xxxx</li>
          <li>xxxx</li>
          <ul>
              <li>xxxx</li>
             <li>xxxx</li>
          </ul>
          <li>xxxx</li>
          <li>xxxx</li>
      </ul>
  </ul>

  The first level dropdown is working, but there's a problem with the display with the submenu.
  
  

• • Reply
  

  Anton Palyok

  Contributor

  2526 Points

  404 Posts

  Re: li:hover IE6

  Jun 22, 2011 09:19 PM|LINK

  Then you should find all <ul> tags and for each tag add onHover logic for it <li> tags.

  Something like this:

  function correctMenuIE6() {
          // if not IE then return
          if (navigator.appName != 'Microsoft Internet Explorer') return;
  
          // get all <ul> nodes
          var ulNodes = document.getElementsByTagName("ul");
          
          for (var i = 0; i < ulNodes.length; i++) {
              
              // get all <li> nodes of current <ul>
              var liNodes = ulNodes[i].getElementsByTagName("li");
              
              // add some event handlers to menu items
              for (var j = 0; j < liNodes.length; j++) {
                  // on mouse over add class "hover"
                  liNodes[j].onmouseover = function () {
                      this.className += " hover";
                  }
  
                  // on mouse out remove class "hover"
                  liNodes[j].onmouseout = function () {
                      this.className = this.className.replace(" hover", "");
                  }
              }
          }
  }

  This code will add onHover logic for all ul tags.
  You can add some "if" statements into "for" cycle and analyse className attribute for working with only specific menu Items

  • Edited by Anton Palyok on Jun 22, 2011 09:19 PM
  • Marked as answer by Yanping Wang - MSFT on Jul 08, 2011 02:59 AM