title: Menu CSS issue in IE8
body: <p>I have created a Menu list.
  It is working perfectly on Chrome and Firefox but misaligned in IE8</p>
  
  <p>Chrome Snapshot :-
  <a href="http://postimg.org/image/g6uf9zikr/" rel="nofollow noreferrer">http://postimg.org/image/g6uf9zikr/</a>
  <img src="https://i.stack.imgur.com/oGrti.png" alt="chrome snapshot"></p>
  
  <p>IE8 Snapshot :-
  <a href="http://postimg.org/image/u6o3pzasz/" rel="nofollow noreferrer">http://postimg.org/image/u6o3pzasz/</a>
  <img src="https://i.stack.imgur.com/6bUqk.png" alt="IE8 snapshot"></p>
  
  <p>Here's my CSS ------</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div.menu {
   background-color:#383838;
   height:65px;
   margin-bottom:20px;
  }
  div.menu ul {
   vertical-align:middle;
   list-style:none;
   margin:0;
   padding:0;
  }
  div.menu ul li {
   float:left;
   display:block;
  }
  div.menu ul li a {
   color:#FFFFFF;
   display:block;
   float:left;
   font-family:"Trebuchet MS", Verdana, Arial;
   font-weight:bold;
   padding:24px 20px 22px;
   text-transform:uppercase;
   text-decoration:none;
  }
  div.menu ul li a:hover {
   text-decoration:underline;
   background-color:#2B2B2B;
  }
  
  div.menu ul li:hover ul {
   display:block;
  }
  
  div.menu ul li ul {
   vertical-align:middle;
   text-align:center;
   float: none;
   list-style: none;
   display: none;
   position:absolute;
   z-index:999;
   margin-top:60px;
   background-color:#383838;
   opacity:0.8;
  }
  
  div.menu ul li ul li{
   float: none;
   vertical-align:middle;
   background-color:#383838;
   padding:15px;
  }
  div.menu ul li ul li a {
   color:#FFFFFF;
   font-family:"Trebuchet MS", Verdana, Arial;
   font-weight:bold;
   text-transform:uppercase;
   padding:0px;
  }
  div.menu ul li ul li a:hover {
   text-decoration:underline;
  }
  
  div.menu ul li ul li:hover{
   background-color:#2B2B2B;
   opacity:1.0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="menu"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="index.php"&gt; HOME &lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=""&gt;CONTROLLER&lt;/a&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href=""&gt; CONTROLLER-1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=""&gt; CONTROLLER-2&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=""&gt;IOS BPL ZIO&lt;/a&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href=""&gt; IOS BPL ZIO-1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=""&gt; IOS BPL ZIO-2&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Please help me to resolve the issue.</p>