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并减少padding上的.subMenu值。功能可行但是，我强烈建议更改整体设计（例如删除list-style，添加类似网格的系统，或至少某种方式使其“更整洁”）。看到这里：http://jsfiddle.net/GaQFa/1/我不会为你设计整件事，但它会让你开始实际的可用性。

CSS3过渡不适用于下拉菜单

1 个答案: