<p class="tag"> css 菜单 </p> 我按照《精彩绝伦的css》书上介绍的方法，制作了如下菜单， <br> 但发现弹出的菜单总出现在屏幕外右边，我理解可能是li中绝对定位时没有参照ul中的position：relative。但如何纠正这个问题？我用的是chrome测试。 <br> <br> <br> <style> <br /> ul.toc li { <br /> position:relative; <br /> } <br /> ul.toc li a i{ <br /> display:none; <br /> } <br /> ul.toc li a:hover i{ <br /> display:block; <br /> width:6em; <br /> position:absolute; <br /> top:1em; <br /> left:100%; <br /> margin:-1em 0 0 1em; <br /> padding:1em; <br /> background:#cde; <br /> border:1px solid gray; <br /> } <br /> </style> <br> <br> <br> <div> <br> <ul> <br> <li><a><i>111111111111</i> chapter 1 </a></li> <br> <li><a><i>222222222222</i> chapter 2 </a></li> <br> <li><a><i>333333333333</i> chapter 3 </a></li> <br> </ul> <br> </div> <br> <br> <br> <h2>回复讨论(解决方案)</h2> <p class="sougouAnswer"> 不要给 ul.toc li 加 position:relative; <br> 给 ul.toc li a 加 position:relative; <br> <br> 不知道是不是你要的效果。 </p> <p class="sougouAnswer"> 太酷了，多谢。但是为什么给祖父节点就不行了呢？还要请教下,我听说absolute是沿着他父元素链的relative来定位，但为啥隔了一级就不行了？ </p> <p class="sougouAnswer"> 明白了，ul和li都是块元素。设了背景看出来的。多谢。 </p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
