HTML CSS Списки в IE7

Question

Я обычно не работаю с IE7 просто потому, что ненавижу его, но мой последний клиент использует IE7-IE9 в качестве браузеров по умолчанию (не очень согласованный или актуальный, я знаю). Итак, у меня есть список, который прекрасно отображается во всех новых браузерах и IE8 +, но в IE7 UL, похоже, сливается с LI. Как будто тег не существовал, и UL был частью LI. Каждый элемент списка вложен в один сверху. Это отвратительно. Кто-нибудь знает взломать или способ обойти это? Мой CSS испорчен?

<div class="indentList">
<ul class="level1">
<li class="customer">
    <a href="">Title</a>
</li>
<ul class="level2 level" id="level2">
    <li class="site">
        <a href="">Text</a>
    </li>
    <ul class="level3 level" id="level3">
        <li class="engineer indent">
            <a href="">Name</a>
        </li>
    </ul>
<ul class="level2 level" id="level2">
    <li class="site">
        <a href="">Text</a>
    </li>
    <ul class="level3 level" id="level3">
        <li class="engineer indent">
            <a href="">Name</a>
        </li>
        <ul class="level4 level" id="level4">
            <li>
                <a href="">Item</a>
            </li>
            <li>
                <a href="">Item</a>
            </li>
        </ul>
    </ul>
</ul>
</ul>
</div>

---

.indentList ul {
margin: 0px;
padding: 0px;
float: left;
}
.indentList li a {
    width: 770px;
    margin: 0px 0px;
    padding: 10px 0px;
    display: inline-block;
    float: left;
    }
.indentList li:hover {
    background: #E9E9E9;
    }
.indentList li a:hover {
    text-decoration: none;
    }
.indentList li .edit {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 5px 14px;
    width: auto !important;
    margin: 4px 0px 0px 5px;
    text-align: center;
    display: inline;
    position: relative;
    float: right;
    }
.indentList li .edit.frozen {
    background: #b51a1a url('images/menuBackgroundRed.png') center;
    float: right;
    }
.indentList li.customer {
    background: #787878 url('images/menuBackgroundTaller.png') center;
    color: #FFF;
    box-shadow: inset 0px 0px 0px;
    -moz-box-shadow: inset 0px 0px 0px;
    -webkit-box-shadow: inset 0px 0px 0px;
}
    .indentList li.customer a {
        color: #FFF;
        font-family: 'QuicksandBook', Arial, sans-serif;
        font-size: 17px;
    }
.level2, .level3, .level4 {
    display: block;
    }
.indentList ul ul ul li {
    margin-left: 50px;
    width: 840px;
    }
    .indentList ul ul ul li a {
        width: 770px;
        }
.indentList ul ul ul ul li {
    margin-left: 90px;
    width: 800px;
    }
    .indentList ul ul ul ul li a {
        width: 730px;
        }

Answer 1

Не ваш CSS, но ваш HTML испорчен.

Вы должны делать это (псевдокод):

<ul class="first-level">
  <li>
    <ul class="second-level">
      <li>
        <ul class="third-level">
          <li></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

вместо этого:

<ul class="first-level">
  <li></li>
  <ul class="second-level">
    <li></li>
    <ul class="third-level">
      <li></li>
    </ul>
  </ul>
</ul>