0

I have a standard pure CSS dropdown menu that needs to be supported back to ye olde IE7. My bug is that the submenu will disappear as the user moves their mouse down the links.

GIF illustration

I have been reading about IE7 stacking contexts and it is my understanding that I should be able to set { position: relative; z-index: (something large); } on the parent element of my menu to deal with the disappearing submenu.

This has not worked for me, and I can't find anything in my page content that would have a higher z-index than the menu anyway. (For one thing, nothing actually gets painted over the menu.) Got any clues? Here is my markup (or see Codepen):

<div class="mainmenu">
  <div class="row">
    <a href="/" class="pull-left">
      <img src="logo.png" class="logo">
    </a>
    <ul class="nav-main">
      <li><a href="/">Item 1</a></li>             
      <li><a href="/">Item 2</a></li>             
      <li><a class="dropdown">Item 3 </a>
        <ul class="nav-sub">
          <li><a href="#">Sub-Item 1</a></li>
          <li><a href="#">Sub-Item 2</a></li>
          <li><a href="#">Sub-Item 3</a></li>
        </ul>
      </li>              
      <li><a class="dropdown">Item 4 </a>
        <ul class="nav-sub">
          <li><a href="#">Sub-Item 1</a></li>
          <li><a href="#">Sub-Item 2</a></li>
          <li><a href="#">Sub-Item 3</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>

<div class="content">
    <!-- Then some page content -->
</div>

The CSS (colors removed):

.mainmenu { 
  position: relative;
  top: 0;
  z-index: 597;
  width: 100%; 
  height: 66px;
  margin: 0;
  padding: 0 22px; 
}
.mainmenu .logo  { 
  height: 39px; 
  margin: 16.5px 0; 
  vertical-align: middle; 
}
ul.nav-main {
  margin: 0; 
  float: right; 
  padding: 0 20px; 
  position: relative; 
  top: 0;
}
ul.nav-main a,
ul.nav-main li { 
  -webkit-transition: all 0.1s linear; 
     -moz-transition: all 0.1s linear; 
       -o-transition: all 0.1s linear; 
          transition: all 0.1s linear; 
}
ul.nav-main li {
  list-style-type: none;    
  padding: 22px 8px;
  float: left; 
}
ul.nav-main li a,
ul.nav-main li span {
  display: block; 
}
ul.nav-main li:hover ul { 
  visibility: visible; 
  opacity: 1; 
}
ul.nav-main ul.nav-sub { 
  visibility: hidden; 
  opacity: 0; 
  position: absolute; 
  padding: 0; 
  margin: 0;
  top: 66px; 
}

ul.nav-main ul.nav-sub li {
  display: block;
  float: none; 
  padding: 0;
  outline: 1px solid #aaa;
}
ul.nav-main ul.nav-sub li a,
ul.nav-main ul.nav-sub li span {
  display: block;
  padding: 11px; 
}

Any help would be appreciated.

Drake Parker
  • 127
  • 10
  • I don't believe IE7 supports `z-index`. Check out [Caniuse.com](http://caniuse.com/#search=z-index) – Jmh2013 Jul 17 '14 at 18:53
  • Thanks Fourthmeal, but I believe that says z-index is and always has been supported. Unfortunately, it is [quirky](http://richa.avasthi.name/blog/2008/01/ie7-lessons-learned/). – Drake Parker Jul 17 '14 at 19:06
  • oops you're right. [This](http://stackoverflow.com/questions/1287439/ie7-z-index-layering-issues) question seems to have some good info. Maybe it'll help you out. – Jmh2013 Jul 17 '14 at 20:14

1 Answers1

0
ul.nav-main ul.nav-sub { 
  visibility: hidden; 
  opacity: 0; 
  position: absolute; 
  padding: 0; 
  margin: 0;
  top: 100%; 
}

it works for me perfectly in IE7

codepen

user3212461
  • 433
  • 4
  • 7