因此，我不得不从头开始重新编码网页，因为我继承的网页使W3C的Validator哭了起来。因此，现在我有一个不错的XHTML1.1页面，可以很好地验证（并且完全免费使用javascript！），但是由于某种原因，我的菜单显示不正确。主级别很好，显示在一个漂亮的栏中。第一个子菜单很好，显示在漂亮的悬挂列表中。但是，第二个子菜单应该在与父母一起出现在第一个子菜单中，而第二个子菜单在选择其父母时应该出现在第一个子菜单的右侧。我一直在摆弄这个，但是一直没找到解决这个问题的解决方案。问题区域位于“常规信息->政府发布/表单”下，其中“ DA Pam 25-30”出现在“政府发布/表单”下，而不是子菜单“政府发布/表单”和“其他信息->有用”下链接”，其中“ DISA WebMail”，“ AKO”和“ JTDI”应全部为“有用链接”的子菜单，而不是在其下方列出。
谢谢您的帮助。
该页面的代码如下：
C:\Users\user.3087689\amaya\1\internalsite.html<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Internal Site</title>
<meta name="generator" content="Amaya, see http://www.w3.org/Amaya/" />
<style type="text/css">
body {background-color:#000000}
ul {list-style: none;padding: 0px;margin: 0px;}
ul li {display: block;position: relative;float: left;border:1px solid #8f8f8f}
li ul {display: none;}
ul li a {display: block;background: #8f8f8f;padding: 5px 10px 5px 10px;text-decoration: none; white-space: nowrap;color: #000000;}
ul li a:hover {background: #6666ff;}
li:hover ul {display: block; position: absolute;}
li:hover li {float: none;}
li:hover a {background: #8f8f8f;}
li:hover li a:hover {background: #6666ff;}
</style>
</head>
<body>
<p><img alt="Hey, a logo!" src="logo.jpg"
style="display: block; text-align: center; margin-left: auto; margin-right: auto"
width="457" height="327" /> </p>
<p style="text-align:center;margin-left:auto;margin-right:auto;"><span
style="font-family: Arial"><span style="font-size: 16pt"><span
style="color: #FFFFFF">All SOPs are now maintained on
QT9</span></span></span></p>
<ul id="drop-nav">
<li><a href="#">General Info<br />
</a>
<ul>
<li><a href="http://hazard.com/msds/">MSDS Lookup</a></li>
<li><a href="http://www.google.com">Government
Pubs/Forms</a>
<ul>
<li><a href="http://www.google.com">DA Pam 25-30</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Corporate Web<br />
</a>
<ul>
<li><a href="https://www.google.com" title="TLS">DI TLS</a></li>
<li><a href="https://www.google.com" title="DI WebMail">DI
WebMail</a></li>
<li><a href="https://www.google.com">DI Learn</a></li>
<li><a href="http://www.google.com">My Journey</a></li>
<li><a href="https://www.google.com">QT9</a></li>
<li><a href="https://www.google.com">Ethics
Point</a></li>
</ul>
</li>
<li><a href="#">PC/Admin<br />
</a>
<ul>
<li><a href="www.google.com">BackShops</a></li>
</ul>
</li>
<li><a href="#">Quality Control</a></li>
<li><a href="#">Mechanics</a>
<ul>
<li><a href="www.google.com">Termination Chart</a></li>
<li><a href="www.google.com">Drill Bit Size Chart</a></li>
<li><a href="www.google.com">Rivet Standards</a></li>
</ul>
</li>
<li><a href="#">Supply</a>
<ul>
<li><a href="http://www.google.com">ULLS-A Supply</a></li>
<li><a href="www.google.com">WebFLIS</a></li>
<li><a href="www.google.com">LIW</a></li>
<li><a href="www.google.com">ArmyProperty.com</a></li>
</ul>
</li>
<li><a href="#">Other Info</a>
<ul>
<li><a href="www.google.com">Julian Calendar</a></li>
<li><a href="#">Useful Links</a>
<ul>
<li><a href="www.google.com">DISA Webmail</a></li>
<li><a href="www.google.com">AKO</a></li>
<li><a href="www.google.com">JTDI</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#" title="Corporate VPN Sites">Web Directory</a>
<ul>
<li><a href="www.google.com">Contract Main</a></li>
<li><a href="www.google.com">Corporate Intranet</a></li>
</ul>
</li>
</ul>
<p style="text-align:right;margin-left:auto;margin-right:0;"><a
href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml11" alt="Valid XHTML 1.1" height="31"
width="88" /></a> </p>
</body>
</html>
附加信息：我正在Amaya中进行编码，并在Firefox 25.0.1中进行测试。我不需要外部样式表，因为这是一个只有一个页面的内部网站。 Javascript不是有效的解决方案。我已更改了大多数链接，以指向Google进行测试，并且您不需要任何img即可解决此错误。
最佳答案
好吧，display：block最初会在所有级别上隐藏子菜单，但是当前的css然后说要在li：hover上显示它们-编辑下面将uls隐藏的行：
li ul，li：hover ul ul {display：none;}
即使显示第二个级别，也将隐藏第三个级别。
然后，您想向第三级添加一些左边距-第二级的宽度如何。
另一方面，我经常使用Suckerfish的Son方法-它非常轻巧，如果您不关心支持不支持：hover psuedoclass的旧浏览器，则无需使用额外的javascript。 http://www.htmldog.com/articles/suckerfish/dropdowns/