Как разместить div относительно промежутка?

Question

У меня большой текст в div. В этом тексте я хочу быть в состоянии навести курсор на некоторые конкретные слова, и это будет показывать div ниже слова, содержащего некоторый пользовательский div. (Точно так же, как вы можете навести ссылку в википедии, и появится сводная информация по связанной статье).

Есть ли способ сделать это в чистом CSS (без JavaScript)?

Когда я добавляю div внутри span с относительным позиционированием, он гадит на кровать. Смотри ниже.

Я думаю, что Википедия делает это с 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

Может ты хочешь этого?Если вы хотите сделать выпадающее меню, сделайте это по-другому

.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>

Answer 2

.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>