title: CSS Float and Position not working in IE6
body: <p>I have a problem regarding the CSS Float and Position in IE6, the Tree View I implemented the 2nd level child is not display to left when mouse hover, this is not happen in IE7-9 and other browser (Mozilla FireFox &amp; Chrome) but IE6.</p>
  
  <p>please find my sample Tree View code fragment as below:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
      .treeView
      {
          font-family: Century Gothic;
          font-size: 13px;
          font-weight: bold;
          color: #ff6500;
      }
  
      /* hyperlink style */
      .treeView a
      {
          color: #ff6500;
          text-decoration: none;
      }
  
      /* hyperlink hover style */
      .treeView a:hover
      {
          color: #ff6500;
          text-decoration: underline;
      }
  
      .treeView ul
      {
          list-style: none;
          margin: 0;
          padding: 0;
          width: 246px;
      }
  
      .treeView ul li
      {
          height: 100%;
          background: #def0f6;
          position: relative;
          float: left;
          width: 100%;
          z-index: 3;
      }
  
      /* item background color */
      .treeView li
      {
          background: #def0f6;
          border-top: 1px solid #007dc6;
          border-left: 1px solid #007dc6;
          border-right: 1px solid #007dc6;
      }
  
      .treeView ul li a, .treeView ul li span
      {
          display: block;
          padding: 5px 8px 5px 15px;
      }
  
      /* hide and align child item, and child width */
      .treeView ul ul
      {
          position: absolute;
          top: -1px;
          visibility: hidden;
      }
  
      /* item background color when hover */
      .treeView li:hover
      {
          background: #ffffd8;
      }
  
      /* display child item when hover parent item */
      .treeView li:hover &gt; ul
      {
          visibility: visible;
      }
  
      /* align 2nd child item to left when hover parent item */
      .treeView li:hover ul
      {
          display: block;
          left: 246px;
      }
  &lt;/style&gt;
  
  &lt;div class='treeView'&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;span class='submenu'&gt;Level 1&lt;/span&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href='#' class='submenu'&gt;Level 2&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href='#'&gt;Level 3&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I suspected it is due to the CSS Float:left and Position:Relative.
  Any idea how is float:left work in IE 6? Please help</p>
  
  <p>Thank you in advanced. </p>