Trying to setup a dropdown menu correctly

Question

I am trying to setup a drop down navigation menu. My goal is to position the navigation list in the center of the screen with the the background extending across the entire width of the page.

My problem is that when I hover over a certain tab, it causes the entire menu to position itself down, instead of just the dropdown list appearing under neath the tab I am hovering over.

<div class="navigation">
        <ul class="nav-list">
            <li><a href="#">Home</a></li>
            <li><a href="#">Shop</a>
                <ul>
                    <li><a href="#">New</a></li>
                    <li><a href="#">Used</a></li>
                    <li><a href="#">Refurbished</a></li>
                </ul>
            </li>
            <li><a href="#">Deals</a>
                <ul>
                    <li><a href="#">Today</a></li>
                    <li><a href="#">Monthly</a></li>
                    <li><a href="#">Seasonal</a></li>
                </ul>
            </li>
            <li><a href="#">Sell</a>
                <ul>
                    <li><a href="#">New</a></li>
                    <li><a href="#">Used</a></li>
                    <li><a href="#">Refurbished</a></li>
                </ul>
            </li>
            <li><a href="#">Help</a>
                <ul>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">FAQ's</a></li>
                </ul>
            </li>
            <li><a href="#">Settings</a>
                <ul>
                    <li><a href="#">Cart</a></li>
                    <li><a href="#">Orders</a></li>
                    <li><a href="#">Account</a></li>
                </ul>
            </li>
        </ul>
    </div>

.navigation {
    background-color: #262626;
    display: block;
    opacity: 0.9;
    text-align: center;
}

.navigation ul {
    display: block;
    list-style-type: none;
    text-align: center;
}

.navigation ul li {
    display: inline-block;
    padding-top: 8px;
    padding-bottom: 8px;
    text-align: center;
}

.navigation ul li a {
    color: white;
    font-size: 18px;
    font-weight: 500;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 18px;
    padding-right: 18px;
    text-decoration: none;
}

.navigation ul li a:hover {
    color: #b3b3b3;
}

.navigation ul li ul {
    display: none;
    height: auto;
    margin: 0;
    padding: 0;
}

.navigation ul li:hover ul {
    display: block;
}

.navigation ul li:hover ul li {
    display: block; 
}

Answer 1

Brentonr, do add position:absolute in your css class .navigation ul li ul