CSS3 Переходы НЕ работают в раскрывающемся меню

Question

У меня возникли проблемы с попыткой получить это семантическое меню выпадающего меню HTML, чтобы работать с использованием переходов CSS3. Я опубликовал 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/. Я не собираюсь разрабатывать для вас все это, но вам нужно начать с того, насколько реальная юзабилити идет.