title: div:hover works oddly in IE-8
body: <p>I know that this might be ridiculous and you might say why you are trying to invent the wheel but this is what I am currently doing as an experiment which will help me in future projects and currently it is totally of no financial profit for me.</p>
  
  <p>the whole concept is:</p>
  
  <ul>
  <li><p>I wrote a piece of code in Excel-vba which opens an instance of IE, allowing me to append my java-script code to the content of a webpage and execute it (a fledgling and not comparable counterpart for Firefox Greasemonkey). So far a success.</p></li>
  <li><p>My java-script code adds a menu which is basically a narrow bar at the bottom right corner of the page but when your mouse enters it, its outerHTML turns to:</p>
  
  <pre><code>&lt;DIV style="FILTER: alpha(opacity=95); WIDTH: 450px; HEIGHT: 250px" id=alwaisible&gt;
      &lt;DIV id=dummy onmouseenter=menuButton() onmouseleave=menuButton()&gt;
          &lt;DIV id=MenuButton&gt;_&lt;/DIV&gt;
          &lt;DIV id=MenuTitle&gt;Ikariam Assistant&lt;/DIV&gt;
          &lt;DIV id=MenuBody&gt;
              &lt;DIV id=MenuBar&gt;
                  &lt;DIV class=MenuChoices onclick=Choice(1)&gt;Location&lt;/DIV&gt;
                  &lt;DIV class=MenuChoices onclick=Choice(2)&gt;innerHtml&lt;/DIV&gt;
                  &lt;DIV class=MenuChoices onclick=Choice(4)&gt;Call App&lt;/DIV&gt;
                  &lt;DIV class=MenuChoices onclick=Choice(5)&gt;Extra 1&lt;/DIV&gt;
                  &lt;DIV class=MenuChoices onclick=Choice(0)&gt;Extra 2&lt;/DIV&gt;
                  &lt;DIV class=MenuChoices onclick=Choice(0)&gt;Extra 3&lt;/DIV&gt;
                  &lt;DIV class=MenuChoices onclick=Choice(0)&gt;Extra 4&lt;/DIV&gt;
             &lt;/DIV&gt;
             &lt;DIV style="HEIGHT: 161px" id=MenuRest&gt;Nothing for now!&lt;/DIV&gt;
         &lt;/DIV&gt;
     &lt;/DIV&gt;
  &lt;/DIV&gt;
  </code></pre></li>
  <li><p>Aamong the whole CSS styling applied my problem is with .MenuChoices and .MenuChoices:hover classes which look as follows</p>
  
  <pre><code>.MenuChoices{ 
      border: outset 2px #C7B581;
      color:#FFFFFF;
      background-color: #403924;
      margin: 2px 0px 0px 2px;
      float : left ;
      display : block ;
      width : 82px ;
      text-align : center ;
      z-index : 5001 ;
  }
  .MenuChoices:hover{
      background-color:#456789 !important;
      cursor: pointer;
  }
  </code></pre></li>
  </ul>
  
  <p>Now the problem is, while I browse different sites <strong>I always get my mouse cursor changed whenever it enters one of the MenuChoices</strong> but only <strong>in one certain site the ackground-color changes</strong> and on the rest of times the color change happens only when I click a choice two or three times consecutively, as if the background change is set for the :visited pseudo class! my current IE version is 8.</p>
  
  <p>Any idea what the problem might be?</p>