Menu CSS issue in IE8 - css

Question

I have created a Menu list.
It is working perfectly on Chrome and Firefox but misaligned in IE8
Chrome Snapshot :-
http://postimg.org/image/g6uf9zikr/
IE8 Snapshot :-
http://postimg.org/image/u6o3pzasz/
Here's my CSS ------
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;
}
<div class="menu">
<ul>
<li> HOME </li>
<li>CONTROLLER
<ul>
<li> CONTROLLER-1</li>
<li> CONTROLLER-2</li>
</ul></li>
<li>IOS BPL ZIO
<ul>
<li> IOS BPL ZIO-1</li>
<li> IOS BPL ZIO-2</li>
</ul></li>
</ul>
</div>
Please help me to resolve the issue.

Answer 1

Remove float: left from the links in the menu. This will cause those links to fill the entire row, and the ul of the submenu will not be shown next to it.
To counter that gap that causes, remove the margin-top from the submenu ul.
That should do the trick, although I don't have IE8 at hand to test it.
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;
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;
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;
}
<div class="menu">
<ul>
<li> HOME </li>
<li>CONTROLLER
<ul>
<li> CONTROLLER-1</li>
<li> CONTROLLER-2</li>
</ul></li>
<li>IOS BPL ZIO
<ul>
<li> IOS BPL ZIO-1</li>
<li> IOS BPL ZIO-2</li>
</ul></li>
</ul>
</div>