Question

我正在建立一个下拉导航菜单，当我将position:absolute应用到li Float:left的第二层时，根本不会打扰。如果是跳过Position:absolute，它将第一组li搞定，并扩展原始div。我已经创建了两个Jsfiddle链接来显示我的问题Fiddle with absolute在这一个看起来我想要li span上的<div id="navmenu"> <ul> <li><span>Market</span> <ul> <li><a href="#">Market1</a></li> <li><a href="#">Market2</a></li> <li><a href="#">Market3</a></li> <li><a href="#">Market4</a></li> </ul> </li> <li><span>Sale</span> <ul> <li><span>Sale1</span></li> <li><span>Sale2</span></li> </ul> </li> </ul> </div> #navmenu{ display:inline-block; background:red; } #navmenu ul{ list-style:none; margin:0; padding:0; } #navmenu ul li{ float:left; display:block; padding:0.5em; cursor:pointer; position:relative; } #navmenu ul li ul{ display:none; } #navmenu ul li:hover ul{ display:block; } #navmenu ul li ul li{ float:left; }。 Fiddle without absolute

{{1}}

Answer 1

你不能float绝对元素。您必须通过指定相对于其最近定位父级的位置将它们放置在绝对（固定）位置。因此，定位将使用top:0和left:calc(350px - 100%)之类的内容。需要进行一些调整才能让你的布局像这样工作。

Answer 2

如果您正在构建一个只有一层深度的导航菜单，那么此代码可以正常工作，无需任何特殊方式使用绝对定位。要记住的关键是列表项应该相对定位，他们的ul子项应该绝对定位。这适用于您是构建单级还是多级导航菜单。

现在，这是一个相关的插件。在本书的最后一章中，我考虑了一个多级导航菜单，根据浏览器视口空间以四种不同的方式显示。这是一个结合定位，弹性框和媒体查询的简洁案例。现在，你应该可以从亚马逊免费获得这本书。

* {
    margin: 0;
    padding: 0;
    border: 0;
}

ul {
    list-style-type: none;
}

#navmenu > ul > li {
    float: left;
    padding: 10px 15px;
    cursor: pointer;
    background-color: red;
    position: relative;
}

#navmenu ul ul {
    top: 100%;
    width: calc(100% * 5);
    position: absolute;
    display: none;
}

#navmenu ul ul > li {
    float: left;
}

#navmenu li:hover > ul {
    display: block;
}

Answer 3

<强> Working Fiddle
添加position: fixed（到ul）而不是relative或absolute。它将解决问题。并且float不适用于absolute元素等。如果您还需要其他任何内容，请告诉我们祝你好运

浮在绝对元素上

3 个答案: