ul构造菜单的问题_html/css_WEB-ITnose

css 菜单

我按照《精彩绝伦的css》书上介绍的方法，制作了如下菜单，
但发现弹出的菜单总出现在屏幕外右边，我理解可能是li中绝对定位时没有参照ul中的position：relative。但如何纠正这个问题？我用的是chrome测试。

ul.toc li {
position:relative;
}
ul.toc li a i{
display:none;
}
ul.toc li a:hover i{
display:block;
width:6em;
position:absolute;
top:1em;
left:100%;
margin:-1em 0 0 1em;
padding:1em;
background:#cde;
border:1px solid gray;
}

111111111111 chapter 1 
222222222222 chapter 2 
333333333333 chapter 3 

回复讨论(解决方案)

不要给 ul.toc li 加 position:relative;
给 ul.toc li a 加 position:relative;

不知道是不是你要的效果。

太酷了，多谢。但是为什么给祖父节点就不行了呢？还要请教下,我听说absolute是沿着他父元素链的relative来定位，但为啥隔了一级就不行了？

明白了，ul和li都是块元素。设了背景看出来的。多谢。