将奇数偶数css样式替换为嵌套无序列表

Question

我有一个多级嵌套无序列表。我试图将列表显示为具有奇数偶数css样式的备用行。但我没有得到我想要的东西。这是我到目前为止所尝试的：

http://plnkr.co/edit/8WkUx3BJKnwlIH6bztLe?p=preview

我想做的是如下。如果它只能用css实现，那对我来说就不错了。

＆＃13;

＆＃13;

ul {
	padding-left: 30px;
	list-style: none;
}

#main > ul {
	padding-left: 0;
}
ul li {
	padding: 5px;
}
ul li:nth-child(odd) {
	background:#f4f4f4;
}

＆＃13;

<div id="main">
    <ul>
      <li>one</li>
      <li>
        <ul>
          <li>two</li>
          <li>three</li>
          <li>
            <ul>
              <li>three one</li>
            </ul>
          </li>
        </ul>
      </li>
      <li>four</li>
      <li>five</li>
      <li>
        <ul>
          <li>six</li>
          <li>eight</li>
        </ul>
      </li>
    </ul>
  </div>

＆＃13;

＆＃13;

＆＃13;