title: CSS Bug with inline ul li in IE7
body: <p>I've got a little issue with a inline menu, bug only appears in ie7. The only menu li that has another menu underneath it, is not inline with the rest, the rest seem to appear pushed down.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="topnav"&gt;
  &lt;ul id="jsddm"&gt;
  &lt;li id=""&gt;
  &lt;a id="" href="/"&gt;Home&lt;/a&gt;
  &lt;/li&gt;
  &lt;li id=""&gt;
  &lt;a href="/about.aspx"&gt;About&lt;/a&gt;
  &lt;ul style="visibility: hidden;"&gt;
  &lt;li&gt;
  &lt;a href="/about/board.aspx"&gt;Board&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
  &lt;a href="/about/contact.aspx"&gt;Contact&lt;/a&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;
  &lt;a href="/practices.aspx"&gt;Practices&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
  &lt;a href="/how-we-work.aspx"&gt;How we work&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
  &lt;a href="/patients.aspx"&gt;Patients&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
  &lt;a href="/news-links.aspx"&gt;News &amp;amp; Links&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
  &lt;a href="/link.aspx"&gt;Link&lt;/a&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>    #jsddm
  {   margin: 0;
      padding: 0;
      width: 100%;
  }
  
  #jsddm li
  {   
      display: inline-block;
      list-style: none;
      font: 12px Tahoma, Arial;
      width: 100px;
      text-align: center;
  }
  
  *+html #jsddm li { display:inline }
  * html #jsddm li { display:inline }
  
  #jsddm ul li
  {   
      display: block;
      font: 12px Tahoma, Arial;
  }
  
  #jsddm li ul
  {   
      margin: 0 0 0 0;
      padding: 0;
      position: absolute;
      visibility: hidden;
      border-top: 0px solid white;
      *margin: 0 0 0 -50px; /* IE 7 and below */
       /* margin: 0 0 0 -50px\9; IE 8 and below */
  }
  
  #jsddm ul li ul li
  {           
      font: 12px Tahoma, Arial
  }
  
  #jsddm li a
  {
      display: block;
      background: #009EE0;
      padding: 0;
      line-height: 28px;
      text-decoration: none;
      border-right: 0px solid white;
      width: 70px;
      color: #EAFFED;
      white-space: nowrap;
      font-weight: bold;
      width: 100%;
  }
  
  #jsddm li a:hover
  {   background: #1A4473}
  
  #jsddm li ul li
  {   
      float: none;
      *margin: -2px 0 0 0;
      *padding:0;
  }
  
  +html #jsddm li ul li {  }
  
  #jsddm li ul li a
  {
      width: auto;
      background: #009EE0
      font-weight: bold;
  }
  
  #jsddm li ul li a:hover
  {   background: #0E559C }
  </code></pre>
  
  <p>It uses a jquery function to display the dropdownmenu but it does'nt effect the static html/css.</p>
  
  <p>Thanks.</p>