title: IE li hover not detected with margins on the li element
body: <p>I used the following css to make a child list inside a list display when you hover over the parent list item. In IE7&amp;8 (but not ff and chrome) the space between the child li elements (provided by the line margin: 0.25em 0 0 0;) causes the browser to loose hover and hide the child list again. How can I fix this? Cheers.</p>
  
  <p>The CSS I think is the cause:</p>
  
  <pre><code>#integratedSearchList li:hover &gt; ul
  {
      display: block;
  }
  
  #integratedSearchList ul
  {
  
      display: none;
      margin: 0;
      padding: 0;
  
      position:absolute;
  
      list-style-type: none;
      text-decoration: none;
      z-index: 100;
  
      width:100%;
  }
  
  #integratedSearchList ul li
  {
      border: 1px solid #cccccc;
      background: #ffffff;
      text-align: right;
      padding: 0.5em;
      margin: 0.25em 0 0 0;
      z-index: 100;
      height: auto;
      width:90%;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="integratedSearchContainer"&gt;
    &lt;form id="integratedSearchForm" class="integratedSearchForm" action="..." method="get" name="integratedSearchForm"&gt;
      &lt;ul id="integratedSearchList"&gt;
        &lt;li&gt;
          &lt;label for="search" class="hidden"&gt;...&lt;/label&gt; &lt;input name="query" id="integratedSearchInput" hint="" type="text" maxlength="100" value=""&gt; &lt;button id="integratedSearchbutton" type="submit" class="enablehover" title=" Search "&gt;Go&lt;/button&gt;
          &lt;ul&gt;
            &lt;li&gt;
              &lt;a id="integratedAdvancedSearchHref" href="..." name="integratedAdvancedSearchHref"&gt;Advanced Search&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;label for="seachSource1"&gt;...&lt;/label&gt; &lt;input id="seachSource1" name="source" type="checkbox" value="..."&gt;&lt;br&gt;
              &lt;label for="seachSource2"&gt;...&lt;/label&gt; &lt;input id="seachSource2" name="source" type="checkbox" value="..."&gt;&lt;br&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Complete CSS:</p>
  
  <pre><code>#integratedSearchContainer
  {
      position:relative;
      float: right;
      margin: 1em 1.5em 0 0.75em;
      padding: 0;
  
      background: #ffffff;
  }
  
  #integratedSearchList
  {
      clear: both;
      margin: 0;
      padding: 0;
  
      background: #ffffff;
  
      list-style-type: none;
      text-decoration: none;
      width: 100%;
  }
  
  #integratedSearchList li
  {
      width: inherit;
  }
  
  #integratedSearchList li:hover &gt; ul
  {
      display: block;
  }
  
  #integratedSearchList ul
  {
  
      display: none;
      margin: 0;
      padding: 0;
  
      position:absolute;
  
      list-style-type: none;
      text-decoration: none;
      z-index: 100;
  
      width: 100%;
  }
  
  #integratedSearchList ul li
  {
      border: 1px solid #cccccc;
      background: #ffffff;
      text-align: right;
      padding: 5%;
      margin: 0.25em 0 0 0;
      z-index: 100;
      height: auto;
      width: 90%;
  }
  
  #integratedSearchList ul li:first-child &gt; a
  {
  }
  
  #integratedSearchList ul li:last-child &gt; a
  {
  }
  
  .integratedSearchForm {
      border: 1px solid #cccccc;
      background-color: #ffffff;
  }
  
  .integratedSearchForm button, .integratedSearchForm .button {
      background: transparent url(../images/button_search.gif) no-repeat center top;
      width: 17px;
      height: 17px;
      padding: 0 0 0 0;
      margin: 2px 2px 2px 2px;
      border: none;
      text-indent: -1000em;
      cursor: pointer;
  }
  
  .integratedSearchForm button:hover, .integratedSearchForm button.hover,
  .integratedSearchForm .button:hover, .integratedSearchForm .button.hover {
      background-image: url(../images/button_search_feint.gif);
  }
  
  .integratedSearchForm button:disabled, .integratedSearchForm button.disabled,
  .integratedSearchForm .button:disabled, .integratedSearchForm .button.disabled {
      background-image: url(../images/button_search_disabled.gif);
  }
  
  .integratedSearchForm #integratedSearchInput {
      border: none;
      margin: 2px 0.25em 2px 0.25em;
      background: #ffffff;
      width: 200px;
  }
  </code></pre>