IE上的下拉列表不工作
IE上的下拉列表不工作
提问于 2013-02-26 21:46:35
这个纯粹的css下拉菜单在火狐、Chrome、Safari和Opera中都能很好地工作，但只在IE9中显示列表。它假设它不能在旧版本的IE中工作。据我所知，IE9用下拉菜单解决了悬停等问题。我怎么解决这个问题?谢谢。
纯CSS是：
body {
background: ;
font-family: Arial Black, Helvetica, sans-serif; font-size: 12px; line-height: 16px;
}
nav {
margin: 0px auto;
text-align: center;
}
nav ul ul {
display: none;
width: 130px;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #;
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 10px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #377C37;
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 5px 40px;
color: #757575; text-decoration: none;
}
nav ul ul {
background: #5F6975; border-radius: 0px 0px 10px 10px; padding: 0px;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #;
border-bottom: 0px solid #; position: relative;
border-radius: 0px 10px 0px 0px;
}
nav ul ul li a {
padding: 3px 30px;
color: #fff;
}
nav ul ul li a:hover {
background: #3BA110;
border-radius: 0px 0px 0px 0px;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
border-radius: 0px 10px 10px 10px;
}HTML是：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>GRH Multi-Level</title>
<meta name="Author" content="George R. Hozendorf" />
<link rel="stylesheet" type="text/css" href="../down_menu_lawsart.css" />
</head>
<body>
<nav>
<ul>
<li><a href="http://www.lawsart.com/Home.html">Home</a></li>
<li><a href="http://www.lawsart.com/About.html">About Me</a></li>
<li><a>Portfolios ▼</a>
<ul>
<li><a>Horses ►</a>
<ul>
<li><a href="http://www.lawsart.com/Horse1.html">Horses I</a></li>
<li><a href="http://www.lawsart.com/Horse2.html">Horses II</a></li>
<li><a href="http://www.lawsart.com/Horse3.html">Horses III</a></li>
<li><a href="http://www.lawsart.com/Horse4.html">Horses IV</a></li>
<li><a href="http://www.lawsart.com/Horse5.html">Horses V</a></li>
<li><a href="http://www.lawsart.com/Horse6.html">Horses VI</a></li>
<li><a href="http://www.lawsart.com/Horse7.html">Horses VII</a></li>
</ul>
</li>
<li><a>Dogs ►</a>
<ul>
<li><a href="http://www.lawsart.com/Dog1.html">Dogs I</a></li>
<li><a href="http://www.lawsart.com/Dog2.html">Dogs II</a></li>
</ul>
</li>
<li><a>People ►</a>
<ul>
<li><a href="http://www.lawsart.com/People1.html">People I</a></li>
<li><a href="http://www.lawsart.com/People2.html">People II</a></li>
</ul>
</li>
<li><a href="http://www.lawsart.com/Stills.html">Stills</a></li>
</ul>
</li>
<li><a href="http://www.lawsart.com/Order.html">Order</a></li>
<li><a href="http://www.lawsart.com/Contact.html">Contact Me</a></li>
</ul>
</nav>
</body>
</html>回答 3
Stack Overflow用户
发布于 2013-02-26 22:06:13
我试过你的代码，使用“现代程序库”添加/包含到你的代码中，一切都很好。即使使用IE8 http://modernizr.com/
<script type="text/javascript" src="modernizr.js"></script>
Stack Overflow用户
发布于 2013-02-26 22:07:38
我正在格式化您的代码，并且我意识到您错过了</nav>之前的结束</ul>。验证
Stack Overflow用户
发布于 2013-05-31 15:33:58
您使用了不支持旧版本的html5元素。如果你想在旧版本中支持html5元素，那么只需在你的html文件中使用带有head标签的以下js即可。
<script type="text/javascript">
document.createElement("nav");
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15090731
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号