Question

所以我不得不从头开始重新编码网页，因为我继承的那个网页让W3C的Validator哭了。所以现在我有一个很好的XHTML1.1页面可以很好地验证（并且奇妙的javascript免费！），但由于某种原因我的菜单显示不正确。主要水平很好，显示在一个不错的酒吧。第一个子菜单很好，显示在漂亮的挂牌列表中。但是第二个子菜单，当他们的父母被选中时应该出现在第一个子菜单的右侧，而是与父母一起出现在第一个子菜单中。我一直在摆弄这个，但一直无法找到解决这个问题的解决方案（这里或其他地方）。问题领域在“一般信息 - >政府酒吧/表格”下，其中“DA Pam 25-30”出现在“政府酒吧/表格”下，而不是作为子项“政府酒吧/表格”和“其他信息 - ＆gt ;有用的链接“where”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进行测试，并且您不需要任何imgs来解决此错误。

Answer 1

好吧，显示：块最初会隐藏所有级别的子菜单，但是当前的css然后会在li上显示它们：hover ---编辑隐藏uls的行：

li ul，li：hover ul ul {display：none;}

即使显示第二个级别，也会隐藏第三级。

然后你想要将一些左边距添加到第三级 - 无论第二级是多宽。

另一方面，我经常使用Son of Suckerfish方法 - 它非常轻量级，如果您不关心支持不支持的旧浏览器，则不必使用额外的javascript。：hover psuedoclass http://www.htmldog.com/articles/suckerfish/dropdowns/

CSS第二级子菜单出现在第1级子菜单中

1 个答案: