title: How to make a drop down menu with half-transparent background-color on IE8?
body: <p>I'm trying to make a dropdown menu which background-color is half-transparent.
  It works just fine on all browsers except on IE8.</p>
  
  <p>When the menu is half-transparent using the follwing Filter, it looks better but the dropdown menu does not show. I made the background-color of the menu white to solve this problem.</p>
  
  <p>Is it possible to make the background half-transparent and the dropdown menu still work on IE8?</p>
  
  <p>Filter</p>
  
  <pre><code>        filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#CCffffff,EndColorStr=#CCffffff);
      -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#CCffffff,EndColorStr=#CCffffff)";
  </code></pre>
  
  <p>html</p>
  
  <pre><code>&lt;!--[if lt IE 9]&gt;
  &lt;style type="text/css"&gt;
  .inner { background-color: #fff !important
  }
  #menu li ul { background-color: #fff;
  }
  &lt;/style&gt;
  &lt;![endif]--&gt;
  
  &lt;header&gt;
   &lt;div class="inner"&gt;
    &lt;nav&gt;
    &lt;ul id="menu"&gt;
      &lt;li&gt;&lt;a href="#"&gt;menu1&lt;/a&gt;&lt;/li&gt;       
      &lt;li&gt;&lt;a href="#"&gt;menu2&lt;/a&gt;
   &lt;ul class="sub-menu"&gt;
        &lt;li&gt; &lt;a href="#"&gt;submenu_1&lt;/a&gt; &lt;/li&gt;
        &lt;li&gt; &lt;a href="#"&gt;submenu_2&lt;/a&gt; &lt;/li&gt;
        &lt;li&gt; &lt;a href="#"&gt;submenu_3&lt;/a&gt; &lt;/li&gt;
        &lt;/ul&gt; &lt;/li&gt;
        &lt;li&gt;&lt;a href="greeting.html"&gt;menu4&lt;/a&gt; &lt;/li&gt;
      &lt;li&gt;&lt;a href="greeting.html"&gt;menu5&lt;/a&gt;
      &lt;/li&gt; 
    &lt;/ul&gt;
  &lt;/nav&gt;
    &lt;/div&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>.inner {
  margin: 0 auto;
  z-index: 999;
  background-color: rgba(255,255,255,0.9);
  position: fixed;
  left: 1%;
  width: 100%;
  filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#99ffffff,EndColorStr=#99ffffff);
  -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#99ffffff,EndColorStr=#99ffffff)";
  }
  
  #menu {
  margin-top: 31px;
  margin-left: 15%;
  float: left;
  width: 70%;
  }
  
  #menu li {
  text-align: center;
  margin-left: 60px;
  display: inline-block;
  float: left;
  height: 50px;
  }
  
  #menu li:hover &gt; ul {
  display: block;
  }
  
  #menu li &gt; a {
    cursor: pointer;
    display: block;
    text-decoration: none;
    position: relative;
    top: -20px;
    height: 50px;
  }
  
  #menu li ul {
  display: none;
  position: absolute;
  background-color: rgba(255,255,255,0.9);
       filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#99ffffff,EndColorStr=#99ffffff);
  -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#99ffffff,EndColorStr=#99ffffff)";
  left: 0;
  top: 100%;
  width: 100%;
  z-index: 2000;
  }
  
  #menu li:hover ul.sub-menu {
  display: block;
  }
  
  
  #menu li ul.sub-menu li {
  float: none;
  margin-left: 0px;
  width: 130px;
  height: auto;
  padding: 0;
  
  }
  
  #menu li ul.sub-menu {
  display: none;
  position: absolute;
  width: 130px;
  padding-left: 0;
     left: 430px;
  }
  </code></pre>
  
  <p>Any help will be appreciated. Thank you for reading my question.</p>