不用JS代码实现IE6下a:hover i的方法

今天LZ在做练习的时候对 a:hover span不能再IE6下实现效果感到无法理解，IE6只支持a:hover这个写法LZ知道，但是我按照正确的写法写了，为什么还是不能显示呢。
经过百度的一番查找，发现网上绝大部分都是让在页面中添加JS属性来让IE6实现hover方法，但是我试过之后都不行，终于让我发现，用css添加两个属性就能轻松解决，下面列出代码：
css代码
<style type="text/css">
.toc li{ position:relative; width:10em;}
li a {display:block;} /*必须让a成为块级元素*/
li a i{ display:none;}
li a:hover{text-align:left;}/*这里添加的代码只是为了让IE6显示，没有特殊功能，除text-decoration，color，z-index外都可以写*/
.toc li a:hover i{display:block; width:6em; position:absolute; top:0; left:100%; margin:-1em 0 01em; padding:1em; background:#cde; border:1px solid gray; text-align:left;}
</style>
html代码
<ul class="toc" id="toc">
<li><a href="1.html">Chapter 1<i>In which a dragon is seen</i></a></li>
<li><a href="2.html">Chapter 1<i>In which a knight is summoned</i></a></li>
<li><a href="3.html">Chapter 1<i>In which a proncess is disappointed</i></a></li>
<li><a href="4.html">Chapter 1<i>In which a dragon is seen</i></a></li>
<li><a href="5.html">Chapter 1<i>In which a dragon is seen</i></a></li>
<li><a href="6.html">Chapter 1<i>In which a dragon is seen</i></a></li>
<li><a href="7.html">Chapter 1<i>In which a dragon is seen</i></a></li>
</ul>