title: How to make Background of list items transparent in all browsers
body: <p>This may seem trivial, but somehow I am not able to make it work.</p>
  
  <p>I have a menu with list item (as follows), to which I want to give a transparent background.</p>
  
  <pre><code>&lt;ul class="nav"&gt;
      &lt;li&gt;
          &lt;a href="value.php"&gt;&lt;img src="./images/content/menu-item.png"&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;div class="wrapper-demo"&gt;
              &lt;div id="dd" class="wrapper-dropdown-5 active" tabindex="1"&gt;
                  &lt;img src="./images/menu-selected.png"&gt;
                  &lt;ul class="dropdown"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-user"&gt;&lt;/i&gt;Profile&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-cog"&gt;&lt;/i&gt;Settings&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-remove"&gt;&lt;/i&gt;Log out&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &amp;#8203;&lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
         ...
      &lt;/li&gt;
      &lt;li&gt;
         ...
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The problem is that I am not able to give a transparent background to li items in ul.dropdown.</p>
  
  <p>This is what I did:-</p>
  
  <pre><code>.wrapper-dropdown-5 .dropdown li {
  padding: 0 10px ;
  background-color: rgba(0,0,0,.3);
  </code></pre>
  
  <p>}</p>
  
  <p>Even Transparent PNG doesn't work too. It just shows me a low tint color but no transparency.</p>
  
  <p>Thanks.</p>