At the moment the div opens up to the bottom of the "Global" text, but i need it to open up to the right of it, like a small box.

```css
.div-global-tab{ /* div global */
    display: none;
}

#global:hover .div-global-tab{ /* li ul global */
    display: block;
}
```

```html
                        <li id="global">
                            <a href="#">Global</a>
                            <div class="div-global-tab">
                                <ul>
                                    <li><a href="#">North America</a></li>
                                    <li><a href="#">Europe</a></li>
                                    <li><a href="#">South America</a></li>
                                    <li><a href="#">Asia</a></li>
                                    <li><a href="#">Africa</a></li>
                                    <li><a href="#">Climate Change</a></li>
                                    <li><a href="#">Nature</a></li>
                                    <li><a href="#">Global Disasters</a></li>
                                    <li><a href="#">The Future</a></li>
                                    <br>
                                    <li><a href="#">Other</a></li>
                                </ul>
                            </div>
                        </li>
```