I've been trying to create this basic menu from scratch but I've got a little problem: whenever I hover the 'Categories' menu for example(which is a dropdown element), the elements to the right get automatically moved even farther.

HTML:

```
<div id = "navbar">
    <ul>
        <li>News</li>
        <li>News</li>
        <li>News</li>
        <li>News</li>
        <li>Market</li>
        <li class = "navbar_multiple">&nbsp;&nbsp;Categories
            <ul>
                <li>Travel</li>
                <li>Entertainment</li>
                <li>Fun</li>
            </ul>
        </li>
        <li>Fun</li>

    </ul>
</div>

```

CSS: apparently too long - but included in the jsFiddle below

Here's the jsFiddle: <http://jsfiddle.net/ktvde9qo/4/>

I want to make it so that when the user hovers over the 'Categories' item, it would create the dropdown menu under it but keep its dimension as it was. How can I do that?