首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >IE8中的菜单CSS问题

IE8中的菜单CSS问题
EN

Stack Overflow用户
提问于 2015-06-02 16:18:48
回答 1查看 89关注 0票数 0

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

铬快照:- http://postimg.org/image/g6uf9zikr/

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

这是我的CSS

代码语言:javascript
复制
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;
}
代码语言:javascript
复制
<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>

请帮我解决这个问题。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-06-02 17:22:58

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

若要消除造成的差距,请从子菜单margin-top中删除ul

虽然我手头上没有IE8来测试它,但这应该能起作用。

代码语言:javascript
复制
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;
}
代码语言:javascript
复制
<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>

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/30601363

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档