我制作了一个带翻转图片的下拉菜单。翻转图像几乎可以工作（Benedict Cumberbatch意味着变成水獭）和一个下降的子菜单（此刻不会出现）。
我做错了什么？这是JSfiddle
HTML＆gt;＆gt;
<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＆gt;＆gt;
#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');}