IE 7 ul вложенности и позиционирования - верхний конец не совпадает

Question

Вот ссылка на страницу: http://themes.brixwork.com/altamont/

Положение тегов

в меню ul # на IE7 перекошено. Я установил границы для элементов UL (# f00) и LI (# 0f0) для пояснения.

В Firefox элементы LI правильно вкладываются в верхнюю часть UL, однако в IE LI вкладывается в верхнюю часть меню div #, а не в меню ul # под ним.

Дерево DOM выглядит так:

<div id="menubar" class="grid_16 alpha omega">
     <ul id="menu">
          <li style="margin-left:0px;"><a href="/" title="homepage">home</a></li>
          <li><a href="http://themes.brixwork.com/altamont/about">about me</a></li>
          <li><a href="http://themes.brixwork.com/altamont/listings">featured listings</a>   
               <ul class="submenu">
                    <li>
                         <a href="http://themes.brixwork.com/altamont/area-map">on a map</a>
                    </li>
               </ul>
          </li>
          <li>
               <a href="http://themes.brixwork.com/altamont/mls-search">MLS&reg; search</a>
          </li>
          <li>
               <a href="http://themes.brixwork.com/altamont/resources">resources</a>
               <ul class="submenu">
                    <li>
                         <a href="http://themes.brixwork.com/altamont/for-buyers">for buyers</a>
                    </li>
                    <li>
                         <a href="http://themes.brixwork.com/altamont/for-sellers">for sellers</a>
                    </li>
                    <li>
                         <a href="http://themes.brixwork.com/altamont/pre-sale-assignment">pre-sale / assignment</a>
                    </li>
                    <li>
                         <a href="http://themes.brixwork.com/altamont/useful-links">useful links</a>
                    </li>
               </ul>
          </li>
          <li>
               <a href="http://themes.brixwork.com/altamont/blog">blog</a>
          </li>
          <li>
              <a href="http://themes.brixwork.com/altamont/contact">contact me</a>
          </li>
     </ul>
</div>

Довольно стандартная структура меню div> ul> li с необязательными подменю под каждым

в виде структуры ul.submenu> li.

Я пытался поставить "float: left;" к узлу #menu li, и это действительно решило позиционирование; однако тогда у меня нет хорошего выравниваемого по центру меню - все идет налево в меню.

Вот текущий css, вращающийся вокруг этого (обратите внимание, что я использую сетку 960, а также файл reset.css и text.css, который поставляется вместе с ним).

#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;
}

Answer 1

IE7 игнорирует поля, когда элементы ul имеют относительную позицию. Вы можете исправить это, убрав поле в ваших стилях меню ul # и добавив это значение обратно в родительский div # menubar.

Это даст тот же результат компоновки, но исправит ошибку маржи / относительной ошибки IE7.