Перемещение CSS во вложенном списке

Question

У меня есть вертикальный список значков навигации с подменю (под вкладкой «Новости»). Я хочу, чтобы это подменю переходило от ширины 0 до полной ширины (150 пикселей), когда я наводил курсор на его родительский параметр в главном меню навигации. В настоящее время переход не происходит - он идет прямо на всю ширину без перехода.

Я вставил весь соответствующий код (части css, которые важны для перехода, находятся внизу ниже отмеченной точки).

HTML:

<div id="nav"> 
    <ul> 
    <li><a href="">Home</a></li> 
    <li><a href="">News</a> 
     <ul> 
     <li><a href="">Current</a></li> 
     <li><a href="">Archive</a></li> 
     </ul></li> 
    <li><a href="">History</a></li> 
    </ul> 
</div> 

CSS:

#nav { 
height: auto; 
width: 150px; 
float: left; 
} 

#nav a { 
display: block; 
padding: 6px 0px; 
text-indent: 5px; 
color: #ffffff; 
font-size: 12px; 
text-decoration: none; 
border: 3px solid; 
border-color: #9c6741 #663918 #572e11 #96643f; 
} 

#nav ul { 
padding: 0px; 
margin-top: 0px; 
} 

#nav li { 
list-style: none; 
float: left; 
width: 150px; /*150-2 for border*/ 
background-color: #8f5f3c; 
} 

#nav ul li:hover { 
background-color: #7d5334; 
} 

#nav ul li:hover a { 
border-color: #8f5e39 #663918 #572e11 #8a5b38; 
} 

#nav ul li ul { 
display: none; 
position: absolute; 
margin-top: -33px; 
margin-left: 150px; 
padding: 0; 
} 

#nav ul li:hover ul { 
display: block; 
} 

/*code for transition begins here*/ 

#nav ul li ul li { 
float: none; 
overflow: hidden; 
width: 0px; 
transition: width 1s ease-in; 
} 

#nav ul li:hover ul li { 
width: 148px; 
} 

Answer 1

Вы не можете назвать анимацию на то, что невидимо.

https://jsfiddle.net/scLhp54w/1/

#nav ul li ul { 
    /*display: none; */ 
    position: absolute; 
    margin-top: -33px; 
    margin-left: 150px; 
    padding: 0; 
}