I'm having trouble controlling the use of the background image of the main menu.

The problem started when I did some experimenting with creating a skin for one of my pages. On the other pages, the red image background went away and the white text disappeared into the white background.

I believe that I understand how this is supposed to work (see details below in blue text).
However, there in no menu_hover.gif where I would expect it. If I remember the ../ notation correctly, the image should be in Skins/MinimalExtrophy/images

I did find Portals\_default\Smileys\images\menu_hover.gif and copied it into any place that  I thought might help. Things started operating correctly, so one of the locations must have been correct, but which one? I started removing the menu_hover.gif files, one by one, testing after each removal. After removing all of them, things still work. Yes, I did a refresh. I even closed the browser (IE7)

What's going on! 

In the MinimalExtropy/index.html file, the [NAV] token is used.

In the MinimalExtropy/skin.xml file, the main_dnnmenu_rootitem_hover value and the main_dnnmenu_rootitem_selected value is used.

<Token>[NAV]</Token>
   <Settings>

      <Setting>
         <Name>CSSNodeHoverRoot</Name>
         <Value>main_dnnmenu_rootitem_hover</Value>
      </Setting>

      <Setting>
         <Name>CSSNodeSelectedRoot</Name>
         <Value>main_dnnmenu_rootitem_selected</Value>
      </Setting>

   </Settings>

In the MinimalExtropy/css/menu.css file, both of these call for the background image url(../images/menu_hover.gif).

/*  Main menu hover  */
.main_dnnmenu_rootitem_hover
{ 
    background: url(../images/menu_hover.gif) repeat-x top left;
 }

/*  Main menu selected  */
.main_dnnmenu_rootitem_selected
{
    background: url(../images/menu_hover.gif) repeat-x top left;
 }

All I have to do is be sure that the image I want is in ../images/menu_hover.gif