IE 9 cuts off simple CSS menu subnavs; z-index doesn't help

HTML & CSS
1

Greetings and salutations,

I was astounded by the number of new posts under this category, but hopefully, I can beg some assistance from someone here…

I’ve encountered this problem before and always been able to resolve, but this time it’s kicking my a**. IE 9 and below cut off the submenus of my relatively simple CSS nav menu. I’ve tried to resolve by assigning progressive z-index values to uls, as well as other hacks, but so far, no luck… it’s probably something simple that my weary eyes have overlooked, but any assistance/suggestions would be most welcome. Thanks in advance. My html and css are below…

HTML


<div id="navmenu">
  <div id="navigation">
    <ul>
      <li><a href="/in-the-classroom">In the Classroom</a> <!--parent-->
        <ul>
          <li><a href="/in-the-classroom/content/common-core">Common Core State Standards</a></li>
          <li class="amatch">Career Technical Education >>
            <ul>
              <li><a href="/in-the-classroom/career-tech-ed">CTE Index</a></li>
              <li><a href="/in-the-classroom/career-tech-ed/student-organizations">Career Student Organizations</a></li>
            </ul>
          </li>
          <li class="amatch">Native American Topics >>
            <ul>
              <li><a href="/in-the-classroom/native-american">Native American Education</a></li>
              <li><a href="/in-the-classroom/native-american/2014-conference">2014 Education Conference</a></li>
            </ul>
          </li>
        </ul>
      </li>

      <li><a href="/inside-the-wde">Inside the WDE</a> <!--parent-->
        <ul>
          <li><a href="/inside-the-wde/mission">Mission &amp; Vision</a></li>
          <li class="amatch">Who We Are >>
            <ul>
              <li><a href="/inside-the-wde/director">Director Rich Crandall</a></li>
              <li><a href="/inside-the-wde/divisions">WDE Leadership</a></li>
            </ul>
          </li>
          <li><a href="/inside-the-wde/contact">Contact Us</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>

+++++++++++++++++++++++++++

CSS

/* =====  DROPDOWN  ===== */
#navigation { height:47px; /*width:734px;*/ }
#navigation ul { list-style:none; position:relative; z-index:300; margin:0; padding:0; }

/* ===== First Level ===== */				
#navigation ul li { float:left; position:relative; margin:0; border-right:none; height:47px; }
#navigation ul ul li { height:40px !important; border-bottom:solid #c7f6fa 1px; }

#navigation ul li a { font-family:"Titillium Web", Arial, sans-serif; font-size:13px; text-transform:uppercase; display:block; text-decoration:none; color:#fff; padding:0 11px; line-height:49px; height:47px; font-weight:700; position:relative; }

li.amatch { font-family:"Titillium Web", Arial, sans-serif; font-size:13px; text-transform:uppercase; display:block; text-decoration:none; padding:0 10px !important; line-height:45px; min-height:43px; cursor:url(/images/myCursor.png), auto; width:100%; }
li.amatch:hover { background-color:rgb(154, 224, 247); }

#navigation ul li:hover a { position:relative; background:#c7f6fa; color:#073d66; }
#navigation ul ul, #navigation ul li:hover ul ul { position:absolute; display:none; }
#navigation ul ul li:hover ul, #navigation ul li:hover ul li:hover ul { display:block; top:0px;	left:100%; }

/* ===== Second and Third Level ===== */
#navigation ul li:hover ul { display:block; position:absolute; left:0; top:100%; width:auto; height:auto; margin:0; padding:0; }
#navigation ul ul {
border:solid #c7f6fa 5px;
background:#c7f6fa;
background: -moz-linear-gradient(top, #c7f6fa 1%, #7dc1d4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#c7f6fa), color-stop(100%,#7dc1d4));
background: -webkit-linear-gradient(top, #c7f6fa 1%,#7dc1d4 100%);
background: -o-linear-gradient(top, #c7f6fa 1%,#7dc1d4 100%);
background: -ms-linear-gradient(top, #c7f6fa 1%,#7dc1d4 100%);
background: linear-gradient(to bottom, #c7f6fa 1%,#7dc1d4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c7f6fa', endColorstr='#7dc1d4',GradientType=0 );
}

#navigation ul ul ul {
background:#c7f6fa; border:solid #c7f6fa 5px;
background: -moz-linear-gradient(top, #c7f6fa 1%, #7dc1d4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#c7f6fa), color-stop(100%,#7dc1d4));
background: -webkit-linear-gradient(top, #c7f6fa 1%,#7dc1d4 100%);
background: -o-linear-gradient(top, #c7f6fa 1%,#7dc1d4 100%);
background: -ms-linear-gradient(top, #c7f6fa 1%,#7dc1d4 100%);
background: linear-gradient(to bottom, #c7f6fa 1%,#7dc1d4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c7f6fa', endColorstr='#7dc1d4',GradientType=0 );
margin-left:-18px !important; margin-top:10px !important; }

#navigation ul ul li a { float:none; width:248px; line-height:normal; font-variant:normal; font-weight:400; font-size:13px; text-transform:uppercase; padding:10px; background:none !important; }
	
#navigation ul ul ul li a { color:#fff; }
#navigation ul ul li:hover > a { background:#fff !important; color:#073d66 !important; height:41px !important; position:relative; }
#navigation ul ul ul li:hover > a { background:#fff !important; color:#073d66 !important; height:41px !important; position:relative; }
2

Figured it out… I forgot that IE 9 hates CSS background gradients. Removed said gradients and voila! Menus work as intended… sheesh.

3

Glad you sorted it without our help :slight_smile:

I would avoid the IE specific filters as all have drawbacks as they take over the whole element and change its behaviour. I don’t think its worth the risk adding them in these days and just let old IE have the basic support.

4

Good advice, thanks! Now if would stop forgetting things I already know, I’d really be in business… Alas, my rememberer doesn’t work as well as it once did…

5

lol :slight_smile:

I always forget to remember.