HTML/CSS：将鼠标悬停在子菜单上时，将图像保持在菜单标题中

我有一个菜单，它的标题有一个图像，当它不再悬停时会更改图像。但是，我希望它在我悬停在它下面打开的子菜单上时保持相同的图像，而不是恢复到未被覆盖的状态。这可以通过HTML/CSS实现吗

以下是CSS代码：

ul#nav{
利润率：0像素；
}
掉下{
显示：块；
颜色：透明；
}
滴，滴，滴，滴，滴{
列表样式：无；
保证金：0；
填充：0；
边框：0px实心#fff；
背景：透明；
颜色：透明
}
滴{
位置：相对位置；
z指数：597；
浮动：左；
}
ul.drop li{
浮动：左；
线高：1.3em；
垂直对齐：中间对齐；
缩放：1；
}
停下来，停下来，停下来，停下来{
位置：相对位置；
z指数：599；
游标：默认值；
背景：透明；
}
滴{
显示：无；
位置：绝对位置；
最高：100%；
左：0；
z指数：598；
宽度：100%；
背景：透明；
边框：0px实心#fff；
}
落下：悬停{
显示：块；
}
李先生{
浮动：无；
}
滴{
顶部：-2px；
左：100%；
}
ul.drop li：悬停ul{
可见性：可见
}

这是HTML

<ul class='drop' id='nav' style='padding-bottom:8px;'>
  <li><img alt='Share' border='0' onmouseout='this.src=&apos;normal.png&apos;' onmouseover='this.src=&apos;hovered.png&apos;' src='normal.png' style='padding:0px; margin:0px;'/>
    <ul>
      <li style='background-color:#202020;width:160px;padding:0px; margin:0px;'>
         <!-- Share Buttons -->
      </li>
    </ul>
  </li>
</ul>

背景色：#202020；宽度：160px；填充：0px；边距：0px；'>

Mmm。。我有一个特别的窍门给你，希望你喜欢。我制作的HTML如下所示：

<ul id="nav" class="drop">
    <li class="icon1">HOVER ME
        <ul>
            <li> <a href="#" onclick="alert('Iam clicked')">HIDDEN MENU</a> </li>
        </ul>
    </li>
    <li class="icon1">HOVER ME 2
        <ul>
            <li> HIDDEN MENU </li>
        </ul>
    </li>
</ul>

下面是演示：

---

你会拉小提琴吗？

...
    ul.drop li.icon1{
        background: url(YOUR_IMAGE) no-repeat left top;
        width: 140px;        
    }
   ul.drop li.icon1:hover{
        background: url(YOUR_IMAGE_HOVER) no-repeat left top;
    }
...