title: Hoverable menu goes out of page
body: <p>I have a hoverable menu as you can see in the code. However, I got a problem when I hover, which the hover content goes out of the page. When I use "position: relative" for the div(content) it is okay but then the text "Example" goes to the left, wonder how to fix.</p>
  
  <p><strong>When I use position: absolute:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/AKVBz.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AKVBz.jpg" alt="enter image description here"></a></p>
  
  <p><strong>When I use position: relative:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/ZiQIb.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZiQIb.jpg" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>ul {
    float: right;
    position: relative;
  }
  
  div {
    display: none;
    background-color: red;
    position: relative;
    width: 200px;
  }
  
  ul:hover div {
    display: block; 
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
    &lt;li&gt;Example&lt;/li&gt;
    &lt;div&gt;
      &lt;ol&gt;
        &lt;li&gt;Link 1&lt;/li&gt;
        &lt;li&gt;Link 2&lt;/li&gt;
      &lt;/ol&gt;
    &lt;/div&gt; 
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>