纯CSS实现兼容IE7及以上宽度自适应无限级导航菜单附演示

首先，实现兼容IE7及以上的宽度自适应无限级导航菜单需要用到CSS的伪类选择器。我们可以使用:hover和:focus来表示菜单项的悬停和聚焦状态，使用>和+来表示子菜单和兄弟菜单的关系，同时使用display:none和display:block来控制菜单的隐藏和显示。具体实现步骤如下：

1.给菜单的父元素设置position:relative属性，以便子菜单可以相对于父菜单进行定位：

.menu {
  position: relative;
}

2.给所有一级菜单设置display:inline-block属性，以便让菜单排成一行，并设置相应的背景和样式：

.menu > ul > li {
  display: inline-block;
  background-color: #ccc;
  padding: 10px;
}

3.隐藏所有子菜单，并设置子菜单的样式：

.menu ul ul {
  display: none;
}
.menu ul ul li {
  background-color: #eee;
  padding: 10px;
}

4.当鼠标悬停在一级菜单上时，显示对应的子菜单：

.menu > ul > li:hover > ul {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
}

5.当子菜单用鼠标悬停时，显示下一级的子菜单：

.menu > ul > li > ul > li:hover > ul {
  display: block;
  position: absolute;
  top: 0;
  left: 100%;
}

以上步骤可以实现最基本的无限级导航菜单，并且兼容IE7及以上版本的浏览器。但是如果菜单的层数很多，可能会导致显示不完整的问题。因此，在CSS中也可以设置菜单的最大宽度，在菜单项数量超出时自动换行。例如：

.menu > ul {
  max-width: 800px;  /* 最大宽度为800px */
  margin: 0 auto;   /* 水平居中 */
  white-space: nowrap;  /* 不换行 */
}
.menu > ul > li {
  white-space: normal;  /* 允许换行 */
}

这样即可保证菜单在内容超出时自动折行，并且兼容IE7及以上版本。下面附上一个示例代码，演示最终效果：

<div class="menu">
  <ul>
    <li><a href="#">菜单1</a></li>
    <li><a href="#">菜单2</a>
      <ul>
        <li><a href="#">子菜单1</a></li>
        <li><a href="#">子菜单2</a></li>
        <li><a href="#">子菜单3</a>
          <ul>
            <li><a href="#">孙菜单1</a></li>
            <li><a href="#">孙菜单2</a></li>
            <li><a href="#">孙菜单3</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">菜单3</a></li>
    <li><a href="#">菜单4</a></li>
    <li><a href="#">菜单5</a>
      <ul>
        <li><a href="#">子菜单1</a></li>
        <li><a href="#">子菜单2</a></li>
      </ul>
    </li>
  </ul>
</div>

CSS代码：

.menu {
  position: relative;
}
.menu > ul {
  max-width: 800px;
  margin: 0 auto;
  white-space: nowrap;
}
.menu > ul > li {
  display: inline-block;
  background-color: #ccc;
  padding: 10px;
  white-space: normal;
  position: relative;
}
.menu > ul > li:hover {
  background-color: #ddd;
}
.menu ul ul {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
}
.menu > ul > li:hover > ul {
  display: block;
}
.menu > ul > li > ul > li:hover > ul {
  display: block;
  top: 0;
  left: calc(100% - 1px);
}
.menu ul ul li {
  background-color: #eee;
  padding: 10px;
}