HTML/CSS: Keep Hovered Image in Menu Title While Hovered Over Submenu -

I have a menu that has an image for its title, and replaces images when it is no longer done However, I want to put it on the same image, when I am hovering over the sub-menu that opens under it, instead of returning to its latent state instead of returning to it. Can it be done with HTML / CSS?

Here is the CSS code:

  ul # nav {margin: 0 0px; } Ul.drop a {display: block; Color: Transparent; } Ul.drop, ul.drop li, ul.drop ul {List-style: None; Margin: 0; Padding: 0; Border: 0 px solid #fff; Background: Transparent; Color: transparent} ul.drop {status: relative; Z-index: 597; Swim left; } Ul.drop li {float: left; Line-height: 1.3 AM; Vertical-row: middle; Zoom: 1; } Ul.drop li.hover, ul.drop li: hover {status: relative; Z-index: 59 9; Cursor: default; Background: Transparent; } Ul.drop ul {display: none; Status: Completed; top 100%; Left: 0; Z-index: 598; Width: 100%; Background: Transparent; Border: 0 px solid #fff; } Ul.drop: Hover UL {Display: Block; } Ul.drop ul li {float: none; } Ul.drop ul ul {top: -2px; Left: 100%; } Ueldrop Lee: Hover & gt; Ul {visibility: visible}   
 and here is HTML  
     
 
 
 mmm .. I have a special move for you, I hope you Would love it. I am creating HTML like this:  
  & lt; Ul id = "nav" class = "drop" & gt; & Lt; Li class = "icon 1" & gt; Hover Me & lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "#" onclick = "warning ('IAM click')" & gt; Hidden menu & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; Li class = "icon 1" & gt; Hover Me 2 & lt; Ul & gt; & Lt; Li & gt; Hidden menu & lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; / Ul & gt;   
 and thus run special CSS:  
  ... ul.drop li.icon1 {background: URL (YOUR_IMAGE) no-repeat left top; Width: 140px; } Ul.drop li.icon1: hover {background: url (YOUR_IMAGE_HOVER) any repeating left top; } ...   
 
 Demo here: