Html CSS3转换在下拉菜单上不起作用

我在尝试使用CSS3转换使这个语义HTML下拉菜单正常工作时遇到困难。我已经发布了HTML和CSS供审查。任何帮助都将不胜感激。我相信我做的每件事都是对的。不知道为什么它不起作用

<nav id="mainNav" role="navigation" class="cf">
    <h2>Site navigation</h2>
    <ul class="topMenu">
      <li class="hover">
        <h3>Infant and Baby</h3>
        <ul class="subMenu">
          <li><a href="shoes_and_accessories.html" title="Infant and Baby Shoes">Shoes</a></li>
          <li><a href="shoes_and_accessories.html" title="Infant and Baby Hats">Hats</a></li>
          <li><a href="shoes_and_accessories.html" title="Infant and Baby Clothing">Clothing</a></li>
        </ul>
      </li>
      <li><a href="millinery.html" title="Millinery Also Known as Hats">Millinery</a></li>
      <li class="hover">
        <h3>Shoes and Accessories</h3>
        <ul class="subMenu">
          <li><a href="shoes_and_accessories.html" title="Shoes and Accessories - Mens Shoes">Mens Shoes</a></li>
          <li><a href="shoes_and_accessories.html" title="Shoes and Accessories - Womens Shoes">Womens Shoes</a></li>
          <li><a href="shoes_and_accessories.html" title="Shoes and Accessories - Bags">Bags</a></li>
        </ul>
      </li>
      <li class="hover">
        <h3>Organic Skincare</h3>
        <ul class="subMenu">
          <li><a href="Organic_Skincare.html" title="Organic Skincare - Body">Body</a></li>
          <li><a href="shoes_and_accessories.html" title="Organic Skincare - Face">Face</a></li>
        </ul>
      </li>
      <li><a href="Garments.html" title="Garments">Garments</a></li>
    </ul>
  </nav>

---

mriccelli75，只需更改一些内容来修复设计，例如删除

文本对齐：居中

，并减少

子菜单上的
填充
值。但是，功能是有效的，我强烈建议更改总体设计（例如删除
列表样式
，添加类似网格的系统，或者至少以某种方式使其更“整洁”）。请看这里：我不会为您设计整个产品，但它会让您从实际可用性开始。
您所说的“不工作”是什么意思？我在我的浏览器中进行了测试，虽然设计很差（文本对齐奇怪，文本不合适），但实际的下拉功能似乎“正常”（引号，un引号）。设计很差。谢谢你的帮助。为了让功能正常工作，你做了什么改变吗？@mriccelli75其实没有。以前，您可以访问下拉菜单，但除非您的鼠标位于正确的位置，否则它在消失之前只会闪烁一点。这是因为
h3
元素的
文本对齐：居中
使它们难以访问。此外，您的下拉元素（子菜单）顶部有一个大的
填充区，将它们与组分开，也使它们难以访问。所以我去掉了这两样东西。试着调整它，玩它，以使它更加用户友好。再次您好，如果您访问：您将看到我试图让该子菜单弹出主主页横幅。我一辈子都不能让它工作。设置子菜单顶部的填充，以便子菜单顶部与主页上的横幅图像顶部对齐。我无法获取Z索引以允许子菜单正确显示。我不知道我做错了什么。如有任何帮助，我们将不胜感激。@mriccelli75如果您有其他问题，您应该提出不同的问题（使用“提问”按钮）。即使是相关的。通过这种方式，你可以吸引更多的人关注你的问题，也可以给其他人另一次打击。也就是说，我很乐意帮助你，但是，我查看了你给我的链接，似乎没有子菜单？我看了代码，导航菜单中甚至没有子菜单的代码？
/*nav styles*/
#mainNav {
    padding-left: 3.9%;
    margin-bottom:1em;
}
#mainNav li {
    margin-right: 3%;
    position: relative;
}
#mainNav a, #mainNav h3 {
    font-size: 1.2em;
    text-align: center;
    padding: 0 1em;
}
/*dropdown menu styles*/
#mainNav ul.subMenu {
    float: none;
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    padding-top: 2.8em;
    left: -8000em;
    max-height: 0;
    -moz-transition:max-height 0.5s ease;
    -webkit-transition:max-height 0.5s ease;
    -o-transition:max-height 0.5s ease;
    transition:max-height 0.5s ease;
    overflow: hidden;
    z-index: 1000;
}
#mainNav ul.subMenu li {
    float: none;
    margin: 0;
    background: rgb(76, 67, 65);
    background: rgba(76, 67, 65, .9);
}
#mainNav li:hover ul {
    left: 0;
    max-height: 20em;
}
#mainNav ul.subMenu li a {
    border-bottom: 1px solid white;
    padding: .2em 1em;
    white-space: nowrap;
    color: white;
    text-align: left;
    font-size: 1.1em;
}
#mainNav ul.subMenu li:last-child a {
    border-bottom: none;
}
#mainNav ul.subMenu li a:hover {
    background: rgb(123, 121, 143);
}