html - CSS3 过渡不适用于下拉菜单

Question

我在尝试使用 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>

这是我使用过渡效果的 CSS:

/*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);
}

Answer 1

mriccelli75，只需更改一些内容即可修复设计，例如删除 text-align: center 并减少 .subMenu 上的 padding 值。 功能 有效，但是，我强烈建议更改整体设计(例如删除 list-style，添加类似网格的系统，或者至少以某种方式使它“更整洁”)。看这里:http://jsfiddle.net/GaQFa/1/我不会为您设计全部内容，但就实际可用性而言，它可以帮助您入门。