css - 将鼠标悬停在 anchor 标签上时重叠 anchor 标签

Question

我正在努力解决一个 CSS 显示问题，除了简单地扩展父 div 的宽度之外，我对如何解决这个问题感到困惑。

布局如下:

<div>
  <ul>
    <li>
      <a href="javascript:void(0)">Test</a>
    </li>
    <li>
      <a href="javascript:void(0)">Test Longer 23 Item</a>
    </li>
    <li>
      <a href="javascript:void(0)">Test 2</a>
    </li>
  </ul>
</div>

以及相关的 CSS:

a {
  text-decoration: none;
  display: inline-block;
  padding: 0 10px;
  box-sizing: border-box;
}

a:hover {
  font-weight: bold;
  text-decoration: underline;
}

li + li {
  border-width: 0;
}

li {
  height: 28px;
  line-height: 28px;
  padding: 0 5px;
  width: 100%;
}

ul {
  padding: 14px 0;
  list-style: outside none none;
}

div {
  position: absolute;
  right: 0;
  top: 72px;
  width: 150px;
}

这一切都很好，除非将鼠标悬停在第二个链接(Test Longer 23 Item)上，这会导致粗体、带下划线的文本换行到第二行，并与其下方的 anchor 标记重叠。我可以通过扩展 div 的宽度使其不换行来轻松解决此问题，但我希望有一个更动态的解决方案可用于“推送”后续 li 悬停时元素向下。

这在纯 CSS 中可能吗？

JS Bin

Answer 1

您可以通过将 display: inline-block; 添加到 li 来修复它。

工作代码片段:

a {
  text-decoration: none;
  display: inline-block;
  padding: 0 10px;
  box-sizing: border-box;
}

a:hover {
  font-weight: bold;
  text-decoration: underline;
}

li + li {
  border-width: 0;
}

li {
  display: inline-block; /* <-- this! */
  height: 28px;
  line-height: 28px;
  padding: 0 5px;
  width: 100%;
}

ul {
  padding: 14px 0;
  list-style: outside none none;
}

div {
  position: absolute;
  right: 0;
  top: 72px;
  width: 150px;
}

<div>
  <ul>
    <li>
      <a href="javascript:void(0)">Test</a>
    </li>
    <li>
      <a href="javascript:void(0)">Test Longer 23 Item</a>
    </li>
    <li>
      <a href="javascript:void(0)">Test 2</a>
    </li>
  </ul>
</div>