title: I want the <div class="div-global-tab> to open up to the right of the "Global" text when i hover over it
body: <p>At the moment the div opens up to the bottom of the &quot;Global&quot; text, but i need it to open up to the right of it, like a small box.</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>.div-global-tab{ /* div global */
      display: none;
  }
    
  #global:hover .div-global-tab{ /* li ul global */
      display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>                        &lt;li id="global"&gt;
                              &lt;a href="#"&gt;Global&lt;/a&gt;
                              &lt;div class="div-global-tab"&gt;
                                  &lt;ul&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;North America&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Europe&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;South America&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Asia&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Africa&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Climate Change&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Nature&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Global Disasters&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;The Future&lt;/a&gt;&lt;/li&gt;
                                      &lt;br&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Other&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/div&gt;
                          &lt;/li&gt;</code></pre>
  </div>
  </div>
  </p>