时间戳

首页 > 解决方案 > CSS：如何使用相对位置和多个项目创建下拉菜单

css - CSS：如何使用相对位置和多个项目创建下拉菜单

问题描述

我正在尝试为用户将项目悬停在另一个菜单中时创建一个下拉菜单。

我当前的 HTML：

<ul>
    <li class="menu-main-items">Item1</li>
        <ul id="submenu">
            <li>Sub-item1</li>
            <li>Sub-item2</li>
        </ul>
    </li>
    <li class="menu-main-items">Item2</li>
</ul>

CSS：

.menu-main-items{display:inline;}

#submenu{display:none;}

li:hover #submenu{ //display the submenu below the parent main item }

要将子菜单与父项对齐，我正在考虑使用position:relative;on#submenu并添加一定的偏移量，但这会导致闪烁，因为子菜单在第 2 项之前显示，重新排列菜单。到目前为止，我已经四处搜索，只能在主菜单中找到一项不会导致问题的解释。

还有另一种方法可以解决这个问题吗？

标签： css

解决方案

您应该制作li元素inline-block并将定位更改为absolute. 闪烁是因为元素正在显示，并且在将内容插入流时将其推开。position: absolute将其从流程中移除，消除闪烁。

如果您想相对于父级移动子菜单，请添加position: relative到父级并使用topand left(bottom并right没有真正有用) 来移动它。

有关详细信息，请参阅这篇 CSS 技巧文章。

.menu-main-items{
  display:inline-block;
  position: relative;
}

#submenu{
  display:none;
  position: absolute;
  left: -10px;
}

li:hover #submenu{ 
  display: block;
}
<ul>
    <li class="menu-main-items">Item1
        <ul id="submenu">
            <li>Sub-item1</li>
            <li>Sub-item2</li>
        </ul>
    </li>
    <li class="menu-main-items">Item2</li>
</ul>

推荐阅读