title: There are gaps between <li> in a vertical menu when using IE7
body: <pre><code>&lt;ul id="main"&gt;
    &lt;li class="the-dropdown-link"&gt;&lt;a href="#"&gt;Main Link&lt;/a&gt;
      &lt;ul id="dropdown"&gt;
        &lt;li&gt;sdfsdf&lt;/li&gt;
        &lt;li&gt;sdfsdf&lt;/li&gt;
      &lt;/ul&gt;
   &lt;/li&gt;
  &lt;/ul&gt;
  
  ul#main{ margin:0; padding:0; list-style:none; float:right; width:100%;}
  ul#main li.the-dropdown-link{float:left; width:140px; }
  ul#main ul {position:absolute; display:none; padding:0;list-style:none;}
  ul#main a{display:block;height:24px; width:140px;font-size: 14px; font-weight: 500; text-align: center; color: #ffffff; text-transform: uppercase; line-height: 26px;}
  </code></pre>
  
  <p>With this vertical dropdown menu I get gaps between the <code>&lt;li&gt;</code> in ie7. Doing my research I see that IE7 creates whitespace between <code>&lt;/li&gt;</code> and <code>&lt;li&gt;</code>, however i'm generating my list using php and therefore cannot put all the <code>&lt;li&gt;</code> on the same line like everyone recommends.</p>
  
  <p>I tried adding all the list elements into a variable and using: </p>
  
  <pre><code>$first_list = preg_replace('~&gt;\s+&lt;~', '&gt;&lt;', $first_list);
  </code></pre>
  
  <p>to get rid of spaces, then echoing it.</p>
  
  <p>I don't know what to do.</p>