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 不会显示在其旁边。

为了弥补造成的差距，从子菜单 ul 中删除 margin-top。

虽然我手头没有 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>

IE8 中的菜单 CSS 问题

Menu CSS issue in IE8

css

internet-explorer-8

drop-down-menu