Keep child width dynamic while not resizing parent widths

Question

Having an issue with the child elements of my menu resizing the parent elements and pushing down other items on the page. Right now the dropdown for items under "Services" display how we want them to, but they resize the parent and push down the divs underneath. I have tried absolute positioning of the parent while making the child position relative with no success.

Here is my URL (roll over "Services" in main menu):

Here is my custom CSS for the menu items I am working with:

uk-dropdown.uk-dropdown-navbar.uk-dropdown-width-1 {
    position: relative !important;
}
.uk-parent.uk-nav-header {
    display: inline;
}
.uk-navbar {
    max-height: 46px;
}
.uk-nav-header {
    float: left !important;
}

Thanks in advance for the insight!

Answer 1

This will help you out.

Give position:absolute to the child and it's parent position: relative.

Here is the code:

.uk-navbar-nav > li {
position: relative;
float: left;
}

.uk-dropdown.uk-dropdown-navbar.uk-dropdown-width-1 {
position: absolute;
}