title: Submenu not working with IE7 (child menu not opening)
body: <p>I am working on horizontal menu bar and I’ve used following line code. It is working fine in all browsers:</p>
  
  <p><img src="https://i.stack.imgur.com/2KPMP.png" alt="enter image description here"></p>
  
  <p>but when I’m testing it on IE7 &amp; 8 then sub menu not opening. 
  <img src="https://i.stack.imgur.com/lBa9O.png" alt="enter image description here"></p>
  
  <p>When I removed the shadow from navMenu bar then sub menu items will be visible. 
  <img src="https://i.stack.imgur.com/8VpSW.png" alt="enter image description here"></p>
  
  <p>Html Code: </p>
  
  <pre><code>&lt;div id="navMenu"&gt;
      &lt;div id="menuContainer"&gt;
          &lt;ul id="coolMenu"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Menu1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" id="A1"&gt;Menu2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Menu3&lt;/a&gt; &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Menu4&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Menu5&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Menu6&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Menu7&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS Code: </p>
  
  <pre><code>#navMenu
  {
  
  height: 40px;
  line-height: 40px;
  background-color: #dcdcdc;
  position: relative;
  z-index: 40000 !important;
  margin-left: auto;
  margin-right: auto;
  min-width: 100%;
  overflow:visible;
  </code></pre>
  
  <p>}</p>
  
  <pre><code>#menuContainer
  </code></pre>
  
  <p>{</p>
  
  <pre><code>padding: 0px;
  text-align: left;
  width: 1200px;
  margin: 0px auto;
  z-index: 40000 !important;
    overflow:visible;
   }
  
  
  #coolMenu, #coolMenu ul
  {
  
  padding: 0px;
  text-align: left;
  list-style: none;
  list-style-type: none; /* ie6*/
  }
  
  #coolMenu &gt; li
  {
  
  float: left;
  z-index: 40000 !important;
  display: block; /* ie6*/
   }
  
   #coolMenu li a
   {
  
  display: block;
  height: 40px;
  line-height: 40px;
  padding-left: 15px;
  padding-right: 15px;
  text-decoration: none;
  z-index: 40000 !important;
   display: block; /* ie6*/
   filter:alpha(opacity=90);
  }
  
   #coolMenu ul
   {
  
  position: absolute;
  display: none;
   z-index: 40000 !important; /* arun */
  }
  
    #coolMenu li:hover ul
   {
  
  display: block;
  
    }
  
   /* Main menu
    ------------------------------------------*/
    #coolMenu
  {
  
  margin: 0px;
  float: left;
  font-family: TradeGothic;
  font-style: oblique;
  font-size: 11.25px;
  color: #474747;
  background: #dcdcdc;
  z-index: 40000 !important;
   }
  
    #coolMenu &gt; li &gt; a
    {
  
  color: #474747;
  }
    #coolMenu &gt; li:hover &gt; a
   {
  
  background: #d21c1c;
  color: #fff;
  z-index: 40000 !important; /* arun */
   }
     /* dropdown */
  
    #coolMenu li:hover &gt; ul {
  
      display: block;
     } 
  
  /* Submenu
  ------------------------------------------*/
  
    #coolMenu ul
    {
  
      background: #d21c1c;
      z-index: 40000 !important;
    }
    #coolMenu ul li a
   {
  
      /*z-index: 20 !important;*/
        color: #fff;
       z-index: 40000 !important; 
    }
   #coolMenu ul li:hover a
   {
  
      background: red;
      z-index: 40000 !important; 
   }
  </code></pre>