title: CSS Only Menu, IE7 Issues
body: <p>I've been fighting with getting my CSS-only menu working in all versions of IE, and I think I've almost gotten it down, with the exception of IE7.</p>
  
  <p>On <a href="http://www.roleplaygateway.com" rel="nofollow">the site in question</a>, I'm using the following CSS:</p>
  
  <pre><code>.header-bar {
    position:fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 0;
    background: #333;
    font-size: 1.2em;
    font-weight: bold;
    z-index: 1000;
  }
  .header-bar a:hover {
    text-decoration: none;
  }
  .header-bar a {
    display: inline-block;
    padding: 7px 10px 7px 10px;
    color: #2C8FAA;
    font-size:1.1em;
  }
  .header-bar ul {
    list-style-type: none;
    display: inline-block;
    position: relative;
    height: auto;
  }
  .header-bar ul li {
    background: #333;
  }
  .header-bar ul li:hover {
    background: #444;
    color: #34AACB;
  }
  .header-bar ul.nav &gt; li {
    display: inline-block;
  }
  .header-bar ul ul {
    display: none;
  }
  .header-bar ul ul li {
    border-top: 1px solid black;
  }
  .header-bar ul li:hover &gt; ul {
    margin: 0;
    display: block;
    position: absolute; /* overrides other settings */
    /* top: 28px; */
    height: 28px;
    min-width: 200px;
  }
  .header-bar ul ul li:hover ul {
    top: 0; /* match position of parent, which should be position: relative; */
    position: absolute;
    margin-left: 199px; /* 150px min-width -1 px border */
    border-left: 1px solid black;
  }
  .header-bar ul li a { 
    display: block;
  }
  .header-bar ul li ul li {
    position: relative;
  }
  .header-bar ul ul li:hover ul ul {
    position: absolute;
    top: -48px; /* 28 + 1 for border */
    margin-left: 199px; /* 150px min-width -1 px border */
    border-left: 1px solid black;
  }
  .header-bar ul ul li:hover ul ul {
    top: 0;
  }
  </code></pre>
  
  <p>To style HTML that looks like this:</p>
  
  <pre><code>&lt;div class="header-bar"&gt;
    &lt;div class="container"&gt;
      &lt;ul class="nav"&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;Menu Item 1&lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;
              &lt;a href="#"&gt;Menu Item 1, Submenu 1&lt;/a&gt;
              &lt;ul&gt;
                &lt;li&gt;&lt;a href="#"&gt;Menu Item 1, Submenu 1, Sub-submenu 1&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This appears to work for the child menus, but the parent menu items appear to be adopting a block layout, rather an <code>inline-block</code>.  I'm at my wits' end trying to fight IE at this point, and would appreciate a couple extra pairs of eyes.</p>