CSS Transition in a nested list

Question

I have a vertical list of navigation icons, with a sub-menu (under the News tab). I want this submenu to transition from a width 0 to its full width (150px) when I hover over its parent option on the main navigation menu. Currently, the transition is not happening - it is going straight to the full width with no transition.

I pasted all the relevant code (parts of the css that are important for the transition are at the bottom below the marked point).

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

You can't call an animation on something that is invisible.

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

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