IE8中的菜单CSS问题

Question

我已经创建了一个菜单列表。它在Chrome和Firefox上运行得很好，但是在IE8中不对齐。

铬快照:- 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>

​