title: IE 7 ul li nesting and positioning - the top end does not match up
body: <p>Here's the link to the page:
  <a href="http://themes.brixwork.com/altamont/" rel="nofollow">http://themes.brixwork.com/altamont/</a></p>
  
  <p>The positioning of the <li> tags under the ul#menu appears to be skewed on IE7. I have put borders on the UL (#f00) and LI (#0f0) items to clarify. </p>
  
  <p>IN Firefox, the LI items nest properly to the top of the UL, however on IE the LI nests to the top of the div#menubar rather than the ul#menu under it. </p>
  
  <p>The DOM tree is like this: </p>
  
  <pre><code>&lt;div id="menubar" class="grid_16 alpha omega"&gt;
       &lt;ul id="menu"&gt;
            &lt;li style="margin-left:0px;"&gt;&lt;a href="/" title="homepage"&gt;home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="http://themes.brixwork.com/altamont/about"&gt;about me&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="http://themes.brixwork.com/altamont/listings"&gt;featured listings&lt;/a&gt;   
                 &lt;ul class="submenu"&gt;
                      &lt;li&gt;
                           &lt;a href="http://themes.brixwork.com/altamont/area-map"&gt;on a map&lt;/a&gt;
                      &lt;/li&gt;
                 &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li&gt;
                 &lt;a href="http://themes.brixwork.com/altamont/mls-search"&gt;MLS&amp;reg; search&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
                 &lt;a href="http://themes.brixwork.com/altamont/resources"&gt;resources&lt;/a&gt;
                 &lt;ul class="submenu"&gt;
                      &lt;li&gt;
                           &lt;a href="http://themes.brixwork.com/altamont/for-buyers"&gt;for buyers&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                           &lt;a href="http://themes.brixwork.com/altamont/for-sellers"&gt;for sellers&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                           &lt;a href="http://themes.brixwork.com/altamont/pre-sale-assignment"&gt;pre-sale / assignment&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                           &lt;a href="http://themes.brixwork.com/altamont/useful-links"&gt;useful links&lt;/a&gt;
                      &lt;/li&gt;
                 &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li&gt;
                 &lt;a href="http://themes.brixwork.com/altamont/blog"&gt;blog&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;a href="http://themes.brixwork.com/altamont/contact"&gt;contact me&lt;/a&gt;
            &lt;/li&gt;
       &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Pretty standard div>ul>li menu structure, with optional submenus under each <li> as a ul.submenu>li structure. </p>
  
  <p>I tried putting a "float:left;" to the #menu li node, and that did solve the positioning; however then I don't have a nice centre aligned menu - everything goes to the left on the menu. </p>
  
  <p>Here's the current css revolving around this (note that I'm using 960 grid, and also the reset.css and text.css file that comes with it). </p>
  
  <pre><code>#menubar {
      height:40px;
      text-align: center;
  }
  
  #menu {
      margin:10px auto;
      padding:0px;
      z-index: 20;
      width: auto;
      display: block;
      list-style:none;
      white-space: nowrap;
      position: relative;
      border: 1px solid #f00;
  }
  
  #menu li {
      display:inline;
      margin-left:40px;
      margin-right:0px;
      margin-top:10px;
      margin-bottom:0px;
      padding:0px 0px 0px 0px;
      list-style:none;
      z-index: 25;
      position: relative !important;
      border: 1px solid #0f0;
  
  }
  
  #menu li a:link, #menu li a:visited {
      color:#fff;
      text-decoration:none;
      font-size:12px;
      padding: 10px 0px;
      text-transform: uppercase;
  }
  
  #menu li a:hover {
      color:#ddd;
  }
  
  #menu li a:active {
      position:relative;
      top:1px;
      color:#fff;
  }
  
  .submenu {
      position:absolute;
      left: -9999px;
      display: block;
      background-color:#906117;
      padding:0px 0px 0px 0px;
      top:0px;
      z-index:30;
  }
  
  #menu li:hover .submenu {
      left: 0px;
  }
  
  .submenu li {
      text-align: left !important;
      margin:0px !important;
      padding: 3px 0px 5px 0px !important;
      clear: both;
      float: left;
      position:relative;
      overflow: hidden;
      z-index: 35;
      width: 100% !important;
  }
  
  .submenu li:hover {
      background-color: #f79c10;
  }
  
  .submenu li a:link, .submenu li a:visited {
      color:#fff !important;
      font-size:12px !important;
      padding: 0px !important;
      margin: 0px !important;
      white-space:nowrap;
      display: block;
      width: 100%;
      padding:3px 10px 5px 10px !important;
      z-index: 40;
  
  }
  
  .submenu li a:hover, .submenu li a:active {
      color:#fff !important;
  }
  </code></pre>