IE8中的菜单CSS问题

Question

我创建了一个菜单列表。 它在Chrome和Firefox上完美运行但在IE8中未对齐

Chrome快照： - http://postimg.org/image/g6uf9zikr/

IE8快照： - http://postimg.org/image/u6o3pzasz/

这是我的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><a href="index.php"> HOME </a></li>
<li><a href="">CONTROLLER</a>
<ul>
<li><a href=""> CONTROLLER-1</a></li>
<li><a href=""> CONTROLLER-2</a></li>
</ul></li>
<li><a href="">IOS BPL ZIO</a>
<ul>
<li><a href=""> IOS BPL ZIO-1</a></li>
<li><a href=""> IOS BPL ZIO-2</a></li>
</ul></li>
</ul>
</div>

请帮我解决这个问题。

Answer 1

从菜单中的链接中删除float: left。这将导致这些链接填满整行，子菜单的ul将不会显示在其旁边。

要解决导致这种差距的问题，请从子菜单margin-top中删除ul。

这应该可以解决问题，虽然我手头没有IE8来测试它。

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><a href="index.php"> HOME </a></li>
<li><a href="">CONTROLLER</a>
<ul>
<li><a href=""> CONTROLLER-1</a></li>
<li><a href=""> CONTROLLER-2</a></li>
</ul></li>
<li><a href="">IOS BPL ZIO</a>
<ul>
<li><a href=""> IOS BPL ZIO-1</a></li>
<li><a href=""> IOS BPL ZIO-2</a></li>
</ul></li>
</ul>
</div>