CSS第二级子菜单出现在第一级子菜单中_Css_Drop Down Menu

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

css drop-down-menu

CSS第二级子菜单出现在第一级子菜单中,css,drop-down-menu,Css,Drop Down Menu,所以我不得不从头开始重新编码一个网页，因为我继承的那个网页让W3C的验证器哭了。因此，现在我有了一个很好的XHTML1.1页面，它可以很好地验证（而且非常无javascript！），但由于某些原因，我的菜单没有正确显示。主层很好，显示在一个漂亮的条形图中。第一个子菜单很好，显示在漂亮的挂起列表中。但第二个子菜单（当其父菜单被选中时应显示在第一个子菜单的右侧）与父菜单一起显示在第一个子菜单中。我一直在摆弄这一点，但一直无法找到一个解决方案（在这里或其他地方）来纠正这一点。问题区域位于“一般信息->

所以我不得不从头开始重新编码一个网页，因为我继承的那个网页让W3C的验证器哭了。因此，现在我有了一个很好的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>

C:\Users\user.3087689\amaya\1\internalsite.html
内部站点
正文{背景色：#000000}
ul{列表样式：无；填充：0px；边距：0px；}
ul li{显示：块；位置：相对；浮动：左；边框：1px实心#8f8f}
li ul{显示：无；}
ul li a{显示：块；背景：#8f8f8f；填充：5px 10px 5px 10px；文本装饰：无；空白：nowrap；颜色：#000000；}
ul li a：悬停{背景：#6666ff；}
li:悬停ul{显示：块；位置：绝对；}
li：悬停li{float:none；}
李：将鼠标悬停在{背景：#8f8f8f；}
li:悬停li a:悬停{背景：#6666ff；}

附加信息：我正在Amaya中编写代码，并在Firefox25.0.1中进行测试。我不需要外部样式表，因为这是一个只有一个页面的内部站点。Javascript不是有效的解决方案。出于测试目的，我已将大多数链接改为指向谷歌，您不需要任何IMG来解决此错误。

好的，display:block最初会在所有级别上隐藏子菜单，但当前css会在li:hover--编辑隐藏uls的行，如下所示：

li ul，li:悬停ul{显示：无；}

即使在显示第二层时，也会隐藏第三层

然后你想在第三层增加一些左边距——不管第二层有多宽

另一方面，我经常使用Suckrfish之子方法——它非常轻量级，如果你不关心支持不支持：hover psuedoclass的旧浏览器，你就不必使用额外的javascript，因为它移动了第二个子菜单元素，但也阻止了它们的显示，不幸的是，这没有多大帮助。你只需要告诉他们显示，把这个添加到正确的行中：li:hover ul，li-li:hover ul{display:block；}好吧，这当然更好，如果不是我想要的。第二个子菜单现在处于隐藏状态，直到将鼠标移到第一个子菜单中的父菜单上。它们在鼠标悬停时显示在其父对象的正下方。有没有办法让他们出现在他们父母的右边？是的，有边际。因此，如果你的二级菜单宽10em，每个li高1em，那么这将把你的三级菜单放在正确的位置：li ul ul{margin:-1em 0 10em；}嗯，仍然不是很好，但是功能性很强。我想我会尝试一下你建议的无脚本版本。我们试图避免在页面中出现那么多内容，但看起来这是无法做到的，并且仍然达到了预期的效果。谢谢你的帮助。