title: IE6 and IE7 float issue on navigation list items
body: <p>Like many people, I am having trouble with floating elements in IE7 (and 6, but I don't care about that!)</p>
  
  <p><a href="http://www.storybox.co.nz/wordpress/" rel="nofollow noreferrer">http://www.storybox.co.nz/wordpress/</a></p>
  
  <p>Looks fine in every other browser, but in IE7 the navigation links sit under each other: 
  <img src="https://i.stack.imgur.com/ZV2z1.jpg" alt="enter image description here"></p>
  
  <p>HTML (inline styles are from js dropdown script):</p>
  
  <pre><code>&lt;div id="primary-menu"&gt;
    &lt;div class="menu"&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="#" class="sf-with-ul"&gt;Work.&lt;/a&gt;
          &lt;ul class="sub-menu" style="float: none; width: 1em; visibility: hidden; display: none;"&gt;
            &lt;li style="white-space: normal; float: left; width: 100%;"&gt;&lt;a href="#" style="float: none; width: auto;"&gt;Spatial /&lt;/a&gt;&lt;/li&gt;
            &lt;li style="white-space: normal; float: left; width: 100%;"&gt;&lt;a href="#" style="float: none; width: auto;"&gt;Web /&lt;/a&gt;&lt;/li&gt;
            &lt;li style="white-space: normal; float: left; width: 100%;"&gt;&lt;a href="#" style="float: none; width: auto;"&gt;Graphic&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Lab.&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;About.&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#primary-menu {
      margin:-30px auto 30px;
  }
  #primary-menu ul {
      float:right;
  }
  #primary-menu li {
          float: left;
          list-style: none;
          margin-left: 10px;
              display:inline;
  }
  #primary-menu ul li a {
          float: right;
  }
  </code></pre>
  
  <p>I have tried display:inline on the <code>li</code> items as well as on the <code>a</code> items, but that doesn't work.</p>
  
  <p>Any other tips? Thanks!</p>