我有一个下拉菜单设置。在 Firefox/IE8 等中工作正常。但在 IE7 中不行,理想情况下我想让它工作。当我在 IE7 中将鼠标悬停在菜单上时,菜单消失了。我尝试过调整高度,但没有任何乐趣。
我的代码如下...
CSS..
#topNav ul {
list-style:none outside none;
margin:0;
padding:0;
}
#topNav ul, topnav ul ul {
display:block;
margin:0;
padding:0;
}
#topNav ul li {
display:inline;
float:left;
padding:35px 24px;
list-style:none outside none;
position:relative;
}
#topNav ul li ul {
color:#000000;
display:block;
position:absolute;
top: 68px;
visibility:hidden;
width:180px;
z-index:1000;
height: 200px;
}
#topNav ul .home a, #topNav ul .coffeetable a, #topNav .coffeetable a, #topNav .audio a, #topNav .graphic a {
color:#ff9966;
}
#topNav ul .photography a, #topNav ul .video a, #topNav ul .web a, #topNav ul .contact a {
color: #fff;
}
#topNav ul li ul li {
color:#FF7E00;
display:block;
margin:0 0 5px;
padding:15px;
width: 240px;
}
#topNav ul li ul li a {
color:#000000;
display:block;
margin:0;
padding:5px;
}
#topNav ul li.submenu:hover ul {
left:0;
visibility:visible;
}
#topNav ul li.submenu:hover ul li {
background-color: #000;
margin:0;
padding: 10px 10px;
}
HTML...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The Picturebook Studio Ltd.</title>
<!--[if IE]>
<style type="text/css" media="screen">
body {behavior: url(includes/csshover.htc);}
</style>
<![endif]-->
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/Kozuka_Gothic_Pro_OpenType_400-Kozuka_Gothic_Pro_OpenType_700.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('li');
Cufon.replace('h1');
Cufon.replace('p');
Cufon.replace('ol li');
</script>
</head>
<body>
<?php include('includes/header.php'); ?>
<div id="logo">
<img src="images/logo.png" alt="The Picturebook Studio Ltd" />
</div>
<div id="content">
<h1>Welcome to the picturebook studio limited <br />
</h1>
<p class="whiteParagraph">We employ a team of in house professionals which include:</p>
<ol>
<li>photographers</li>
<li>videographers</li>
<li>sound engineers</li>
<li>graphic designers</li>
<li>web designers</li>
</ol>
<p>We provide the following 'unique' services :</p>
</div>
</body>
</html>
包含导航文件....
<div id="topNav">
<ul>
<li class="home"><a href="#" title="Home">home</a></li>
<li class="submenu photography">
<a href="#" title="Photography">photography</a>
<ul>
<li><a href="#" title="Actors / Presenters / Headshots">Actors / Presenters Headshots</a></li>
<li><a href="#" title="Model / Portfolio Shoots">Model / Portfolio Shoots</a></li>
<li><a href="#" title="People / Portraits">People / Portraits</a></li>
<li><a href="#" title="Wedings / Coffee Table Books">Weddings / Coffee Table Books</a></li>
<li><a href="#" title="Editorial / Commercial">Editorial / Commercial</a></li>
</ul>
</li>
<li class="coffeetable"><a href="#" title="coffee table books">coffee table books</a></li>
<li class="submenu video">
<a href="#" title="video production">video production</a>
<ul>
<li><a href="#" title="Actors / Presenters Showreels">Actors / Presenters Showreels</a></li>
<li><a href="#" title="Corporate">Corporate</a></li>
<li><a href="#" title="Industrial">Industrial</a></li>
<li><a href="#" title="Training Education">Training Education</a></li>
<li><a href="#" title="Weddings">Weddings</a></li>
</ul>
</li>
<li class="submenu audio">
<a href="#" title="audio production">audio production</a>
<ul>
<li><a href="#" title="Voice Over">Voice Over</a></li>
<li><a href="#" title="Music Production">Music Production</a></li>
</ul>
</li>
<li class="web"><a href="#" title="web design">web design</a></li>
<li class="submenu graphic">
<a href="#" title="graphic design">graphic design</a>
<ul>
<li><a href="#" title="PR">PR</a></li>
<li><a href="#" title="Logo Design">Logo Design</a></li>
</ul>
</li>
<li class="contact"><a href="#" title="contact us">contact us</a></li>
</ul>
</div>
我怎样才能解决这个问题,使悬停不会中断?提前谢谢大家。
最佳答案
如果是这种情况...我只能建议仔细检查以确保您的浏览器和文档模式确实处于 IE7 模式,阅读有关 IE7 Z-index 方法的信息。试错 css 位置类型,我相信 IE7 与 css 显示类型(隐藏)有关。
清理你的 CSS,我知道每个人都会喜欢“什么”,但有时你会在你删除错误时找到很好的修复,因为一些浏览器对选择器周围的空格、逗号等更敏感和严格。
如果所有这些都不起作用,并且您扩展网络寻找解决方案,但一无所获。只需进行 IE7 重定向(您可以在没有 JS 的情况下执行此操作),除非您的客户和客户是 IE7 的频繁用户,例如不想升级的紧屁股公司,否则 IE7 不值得压力。
希望对你有帮助
(对不起,我只看了你的代码 2 秒)
关于css - IE7下拉菜单问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5010618/