title: How to get a hidden content to show over cursor using html, css, javascript?
body: <p>There are many words like this:
  test1 test2 test3 test4 test5 test6 test7 test8 test9 test10 test11 ...</p>
  
  <p>Each word is associated with multiple example sentences. And I want them to be hidden before the cursor is over the word. Here's my code.</p>
  
  <p>DEMO: <a href="https://jsfiddle.net/kyubyong/umxf19vo/" rel="nofollow">https://jsfiddle.net/kyubyong/umxf19vo/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;a&gt;&lt;b&gt;test1&lt;/b&gt;&lt;/a&gt;
  &lt;div class="divs"&gt;
      &lt;li&gt;This is the first example&lt;/li&gt;
      &lt;li&gt;This is the second example&lt;/li&gt;
      &lt;li&gt;This is the third example&lt;/li&gt;
  &lt;/div&gt;
  &lt;a&gt;&lt;b&gt;test2&lt;/b&gt;&lt;/a&gt;
  &lt;div class="divs"&gt;
      &lt;li&gt;This is the first example&lt;/li&gt;
      &lt;li&gt;This is the second example&lt;/li&gt;
      &lt;li&gt;This is the third example&lt;/li&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>a:hover
  {
      background-color: lightgray;
  }
  
  .divs 
  {
    display: none;
  }
  
  a:hover + .divs 
  {
      display: block;
      position: absolute;
      background-color: lightgray;
      width: 100%;
      padding: 5px;
  }
  </code></pre>
  
  <p>The problem is when the original line is more than one, the block of example sentences covers the words in the bottom line. I want them to go down so the example sentences don't cover them.</p>