Подменю, не работающее в выпадающем меню css

Question

Я создал выпадающее меню с изображением опрокидывания. Образ опрокидывания почти работает (Benedict Cumberbatch предназначен для превращения в выдру) и подменю для падения (которое в настоящий момент не появляется).

Что я сделал не так? Вот JSfiddle

HTML->>

<ul id="nav"> 
<li><a href="#" class="about"><img src="http://static.tumblr.com/bw1wxme/Lgsmzv53i/rollover-1.jpg"></a> 
<ul> 
<li><a href="#">1.2.1.1. Sub-Level-3</a></li> 
<li><a href="#">1.2.1.2. Sub-Level-3</a></li> 
<li><a href="#">1.2.1.3. Sub-Level-3</a></li> 
<li><a href="#">1.2.1.4. Sub-Level-3</a></li> 
</ul> 
</li> 

CSS->>

#nav { 
width: 100%; 
float: left; 
margin: 0 0 3em 0; 
padding: 0; 
list-style: none; 
opacity:1; 
} 
#nav li { 
float: left; } 
#nav li a { 
    display: block; 
padding: 8px 15px; 
text-decoration: none; 
font-weight: bold; 
color: #069; 
} 
#nav li a:hover { 
color: #c00; 
background-color: #fff; 
} 

#nav ul { 
list-style-type:none; 
display:none; 
} 

#nav .about:hover {background-image:url('http://static.tumblr.com/bw1wxme/RjMmzv543/rollover-2.jpg');} 

Answer 1

Вы должны добавить к вашей CSS:

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

Чтобы показать это, когда парения

Вверх от JsFiddle