Question

在尝试定位绝对定位的div时遇到了一些问题。它的工作应该是我猜的，但是我希望它留在父母的父母而不是父母因为我有一个下拉列表，当我希望它像第一个{{1带有div的显示。香港专业教育学院创建了一个jsfiddle来显示问题。 http://jsfiddle.net/trptR/ 这可以仅使用css完成，还是必须使用Javascript？

HTML

li

CSS

<div id="navmenu">
    <ul>
        <li>example
            <ul>
                <li><a href="#">sub example1</a></li>
                <li><a href="#">sub example2</a></li>
                <li><a href="#">sub example3</a></li>
                <li><a href="#">sub example4</a></li>
            </ul>
        </li>
        <li>Test
            <ul>
                <li>Sub Test 1
                    <div>
                        <ul>
                            <li><a href="">Projekt</a></li>
                        </ul>   
                    </div>
                </li>
                <li>Sub Test 2
                <div>
                        <ul>
                            <li><a href="">Projekt</a></li>
                        </ul>   
                    </div>
                </li>
            </ul>
        </li>
    </ul>
</div>

Answer 1

您可以从position:relative样式集和#navmenu ul li样式集中删除#navmenu ul li ul li吗？ http://jsbin.com/ziqov/1/edit

Answer 2

考虑使用

#navmenu > ul > li{
  float:left;   
  position:relative;
  display:block;
  padding:0.5em;
  cursor:pointer;
}

因为否则您的选择器会互相覆盖。

Answer 3

定位是关键

我不确定我理解你的问题的解释，但我确实理解当你说你有

时

parentElementTop > parentElementBelow > element

您希望元素与 parentElementTop 对齐，而不是 parentElementBelow 。

要将元素绝对地与 parentElementTop 对齐，您在CSS中需要做的就是不将position设置为relative或{{1}在中间 parentElementBelow 上，任何后续绝对定位的元素将根据最后一个非静态定位的祖先对齐。在您的情况下， parentElementTop 就是您想要的。

绝对位置与父母的父母而不是父母保持一致

3 个答案:

定位是关键