title: ie 7 doesn't work with CSS inline-block or fixes
body: <p>I know that this has been asked a million times before, but nothing that I have tried has solved the problem. I'm working on a nice looking <code>&lt;select&gt;</code> type thing. I'm basing it off of common CSS drop down navigation menus (using nested <code>&lt;ul&gt;</code>s and <code>&lt;li&gt;</code>s, just with a few tweaks. One of the tweaks is that I need it to display inline (without floating it because it goes past any other elements in the same line as it, and I don't want to float everything else around it). I've got it working well in the browsers besides ie 7 (and probably anything lower, but I don't need anything lower than ie7). Here is the code: <a href="http://jsfiddle.net/ralokz/hjDVS/2/" rel="nofollow noreferrer">http://jsfiddle.net/ralokz/hjDVS/2/</a></p>
  
  <p>If you look at that in any non-ie7 browser, it looks like how I want it to:</p>
  
  <p><img src="https://i.stack.imgur.com/4xhjK.jpg" alt="good menu"></p>
  
  <p>But if you look at it in ie7, it looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/B6xqP.jpg" alt="bad menu"></p>
  
  <p>One site that I saw come up a lot for the inline-block fix is this: <a href="http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/" rel="nofollow noreferrer">http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/</a>. That worked for ie8, but unfortunately ie7 still doesn't look right.</p>
  
  <p>Is there any other way to fix inline-block for ie7? Or, is there a CSS alternative to make sure the the second level <code>&lt;li&gt;</code>s are always vertically aligned with the the first level <code>&lt;li&gt;</code>? Thanks!</p>