如何相对于跨度定位 div？

Question

我在 div 中有一个大文本。在本文中，我希望能够将鼠标悬停在某些特定的词上，这将在包含一些自定义 div 的词下方显示一个 div。（与将 link 悬停在维基百科中的方式相同，将显示 linked 文章的摘要）。

有没有办法在纯 CSS（没有 javascript）中做到这一点？

当我在具有相对定位的跨度内添加一个 div 时，它会拉屎。见下文。

我认为维基百科是用 JS 来做的。

.menu-hover:hover > div {
  display: block
}

.menu {
  position: relative;
  top:20px;
  display: none;
  background: red;
}

<div>
  <span>Blah blah...</span>
  <span class="menu-hover">Menu
     <div class="menu">menu items</div>
  </span>
  <span>Bluh bluh...</span>
</div>

Answer 1

.menu-hover {
  position: relative;
}

.menu-hover .menu-wrapper {
  position: absolute;
  left: 0;
  width: 100vh;
}

.menu-hover .menu {
  position: absolute;
  top: calc(1.2em);
  display: none;
  background: red;
}

.menu-hover:hover .menu {
  display: inline-block;
}

<div>
  <span>Blah blah...</span>
  <span class="menu-hover">Menu
    <span class="menu-wrapper">
      <span class="menu">
        <ul>
          <li>Item 1
          <li>Item 2
          <li>Item 3 which is a longer item
          <li>Item 4
        </ul>
      </span>
  </span>
  </span>
  <span>Bluh bluh...</span>
</div>

Answer 2

也许你想要这个？如果你想让下拉菜单做其他方式

.hidden-word{
  position:absolute;
  visibility:hidden;
  font-size:11px;
}

.word{
  display:inline-block;
}
.word:hover > .hidden-word{
  visibility:visible;
}

<div>
  <span>Blah blah...</span>
  <span class="word">some word
     <div class="hidden-word">Hidden word</div>
  </span>
  <span>Bluh bluh...</span>
</div>

如何相对于跨度定位 div？

How to position div relatively to a span?

html

css

positioning