Перемещение высоты не работает

Question

Я попытался поместить этот код в #subnavlist li, но он не будет работать. В основном я пытался оттянуть на высоту Hover

height: 0; 
-webkit-transition: height 200ms ease-in; 
-moz-transition: height 200ms ease-in; 
-o-transition: height 200ms ease-in; 
transition: height 200ms ease-in; 

Answer 1

Используйте свойство перехода CSS transition-delay;

Это решает проблему: http://jsfiddle.net/cdxbk443/

Или без анимации: http://jsfiddle.net/vd9qz3xs/

Чтобы увеличить продолжительность задержка, просто добавьте еще несколько секунд в свойство transition-delay от ul#subnavlist.

ul#navlist { 
    font-family: sans-serif; 
} 
ul#navlist a { 
    text-decoration: none; 
    color: white; 
} 
ul#navlist, ul#subnavlist, li#subactive, ul#navlist ul, ul#navlist li, #active { 
    list-style-type: none; 
    width: 250px !important; 
    overflow:hidden; 
    margin:0; 
    padding:0; 
} 
ul#navlist li { 
    float: left; 
} 
ul#navlist li a:hover { 
    color: #F7A11A; 
} 
#left-arrow { 
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent; 
    border-right: 10px solid transparent; 
    position: relative; 
    float: right; 
    left: 100px; 
    border-top: 10px solid #404040; 
} 
#d1 span { 
    float: left; 
    position: relative; 
    left: -15px; 
} 
ul#subnavlist { 
    visibility: hidden; 
    opacity: 1; 
    height: 0px; 
    width:250px !important; 
    z-index: 9; 
    font-size: 8pt; 
    padding-top: 5px; 
    top:0; 
    left:0; 
    width:250px !important; 
} 
ul#subnavlist li { 
    float: none; 
    width:250px !important; 
    padding: 0px; 
    margin: 0px; 
} 
ul#subnavlist li a { 
    color: white; 
    padding: 0px; 
    margin: 0px; 
} 
ul#navlist li:hover ul#subnavlist { 
    visibility: visible; 
    transition-delay: 0.4s; 
    background: #404040; 
    font-size: 8pt; 
    padding-top: 5px; 
    top:0; 
    left:0; 
    height: auto; 
    width:250px !important; 
    border-top: 6px solid #F7A11A; 
} 
ul#navlist li:hover ul#subnavlist li a { 
    display: block; 
    width: 250px; 
    border: none; 
    padding: 7px 10px; 
} 
#container1 { 
    height: 20px; 
    padding: 5px; 
    background: #404040; 
} 
#navlist:hover #left-arrow { 
    border-top: 10px solid white; 
    position: relative; 
    transform: translateX(118px) rotate(180deg); 
    border-top: 10px solid #F7A11A; 
} 
#navlist:hover #couldBeAnImage { 
    border-top: 10px solid #F7A11A; 
    -moz-transform: rotate(180deg); 
    -ms-transform: rotate(180deg); 
    -o-transform: rotate(180deg); 
    -webkit-transform: rotate(180deg); 
    position: relative; 
    top: 4px; 
} 
#navlist:hover #d1 span { 
    color: #F7A11A; 
} 
#left-arrow { 
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent; 
    border-right: 10px solid transparent; 
    float: left; 
    border-top: 10px solid white; 
    top: 4px; 
    -webkit-transition: -webkit-transform .42s ease-in-out; 
    -ms-transition: -ms-transform .42s ease-in-out; 
    transition: transform .42s ease-in-out; 
} 

Answer 2

Вы хотите добавить собственность transition-delay. https://css-tricks.com/almanac/properties/t/transition-delay/

Они, как вы написали свое свойство короткого перехода, включают только продолжительность перехода.

переход: [переход-свойство] [продолжительность перехода] [функция времени перехода] [переход-задержка];

Так просто добавить длительность задержки до конца ваших строк, как так:

-webkit-transition: height 200ms ease-in 200ms; 
-moz-transition: height 200ms ease-in 200ms; 
-o-transition: height 200ms ease-in 200ms; 
transition: height 200ms ease-in 200ms; 

Answer 3

* { padding:0; margin:0; } 
 
li { list-style: none: list-type: none; } 
 
li div { max-height:0; overflow:hidden; background: #000; color: #fff; 
 
    transition: all 0.2s ease-in-out; 
 
} 
 
li span { display: block; padding: 4px; font-weight: bold; color: #fff; background: #000;} 
 
li span:hover + div { 
 
    max-height: 400px; 
 
}

<ul> 
 
    <li> 
 
    <span>Something</span> 
 
    <div> 
 
     Some content <br> 
 
     Some content <br> 
 
     Some content <br> 
 
     Some content <br> 
 
     Some content <br> 
 
    </div> 
 
</ul>

Transitions необходимо определенное начало и определенный конечное состояние. Вы не имеете определенный конечный рост (auto не определен), так что вы не можете перейти от height:0 к height:auto

Вашего JSFiddle не содержит какой-либо высоту перехода кода либо.

Обходным путем для вас является использование max-height и переход от 0 к некоторым умеренно большим значениям.