CSS:下拉菜单中的相对位置会影响父级

Question

我有一个包含 ul 子级的 li 父级。两者都需要定位为相对。

问题是 ul 子元素的宽度改变了 li 父元素的宽度。

这是我的代码:

HTML

<li class="nav open">
<ul class="dropdown-menu " role="menu">
    <li id="t-smwbrowselink"><a href="/mediawiki/index.php/Special:Browse/Main_Page" rel="smw-browse" tabindex="-1">Browse properties</a></li>
    ....
</ul>

CSS

li.nav.open {
    position: relative;
    overflow: auto;
    display:  inline-block;
}

ul.dropdown-menu {
    position: relative;
}

我添加了结果的图像。 Image .如果父 ul 都处于相对位置，我怎样才能使父 ul 独立于子？

Answer 1

我假设您正在使用 BootStrap？如您所知，子菜单/下拉菜单 ul 是开箱即用的 position: absolute。

您可以将 max-width 添加到有问题的 li - 这是一个 fiddle :https://jsfiddle.net/xu7u8prn/

li.dropdown.open {
  position: relative;
  max-width: 100px;
}
ul.dropdown-menu {
  position: relative;
}

请注意，我已经为示例获取了 BootStrap 默认导航代码。

您需要对适合您的情况的具体方法进行实验...