Relative positioning issue with tertiary menus

Question

I've ton quite a bit of searching on this topic and have successfully accomplished this in the past (dif project). My tertiary menus (<ul>) are not showing up as expected, that is, in relation to the <li> they are nested in. All of the tertiary menus are showing up in relation to the first sibling <li> of the secondary menu. I have the primary menu (<ul>) set to 'position: relative' and secondary and tertiary to 'relative' ... which is the only advice I'm finding.

So to reiterate, I'm trying to get my tertiary menus to appear below it's parent <li>. And this needs to be able to be responsive to dif width browser windows (on desktops and laptops) ... for the mobile version I'll implement some media queries which will treat the menus dif, every <li> will be block and full width, so this won't be an issue in mobile version.

Code below as well as a jsfiddle link. Thanks for any help, it's much appreciated!

jsFiddle: https://jsfiddle.net/06kLo2aa/1/

CSS:

            body, nav, ul, li, a  {margin: 0; padding: 0;}
        a {
            text-decoration: none;
            color: #fff;
        }
        nav {
          background: #005838;
        }
        ul {
            list-style: none;
        }
        ul.primary, ul.secondary  {
            padding: 0 10px;
        }
        nav ul.primary {
            position: relative;
        }
        li.primary-item, li.secondary-item { 
            display: inline;
        }
        nav a { 
            display: inline-block;
            text-transform: uppercase;
            color: #fff;
            font-weight: bold;
            padding: 0.75rem;
            margin: 0.5rem 0;
            font-size: 1.125rem;
        }
        nav ul li.primary-item > a:hover { 
            text-decoration: none;
            background-color: #008050; 
        }
        nav li.primary-item > a.btn-active {
            background-color: #008050;
        }
        nav ul li.secondary-item > a:hover {
            text-decoration: none;
            background-color: #9dcb6b; 
        }
        nav li.secondary-item > a.btn-active {
            background-color: #9dcb6b;
        }
        nav ul li.tertiary-item > a { 
            display: block;
        }
        nav ul li.tertiary-item > a:hover { 
            text-decoration: none;
            background-color: #769950; 
        }
        nav ul.secondary {
            display: none;
            position: absolute;
            left: 0;
            width: 100%;
            background: #008050;
        }
        nav ul.secondary li.secondary-item a {
            padding: 0.3rem 0.75rem;;
        }
        nav ul.tertiary {
            display: none;
            position: absolute;
            z-index: 9999;
            background: #9dcb6b;
        }
        nav ul.tertiary li.tertiary-item {
            border-bottom: 1px solid #7EA356;
        }           
        nav ul.tertiary li.tertiary-item a {
            padding: 0.75rem;
            margin: 0;
        }

HTML:

<nav>
        <ul class="primary">
            <li class="primary-item">
                <a href="#">Primary 1</a>
                <ul class="secondary">
                    <li class="secondary-item"><a href="#">P1 - Secondary 1</a>
                        <ul class="tertiary">
                            <li class="tertiary-item"><a href="#">P1 - S1 - Tertiary 1</a></li>
                            <li class="tertiary-item"><a href="#">P1 - S1 - Tertiary 2</a></li>
                        </ul>
                    </li>
                    <li class="secondary-item"><a href="#">P1 - Secondary 2</a>
                        <ul class="tertiary">
                            <li class="tertiary-item"><a href="#">P1 - S2 - Tertiary 1</a></li>
                            <li class="tertiary-item"><a href="#">P1 - S2 - Tertiary 2</a></li>
                        </ul>
                    </li>
                    <li class="secondary-item"><a href="#">P1 - Secondary 3</a>
                        <ul class="tertiary">
                            <li class="tertiary-item"><a href="#">P1 - S3 - Tertiary 1</a></li>
                            <li class="tertiary-item"><a href="#">P1 - S3 - Tertiary 2</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="primary-item">
                <a href="#">Primary 2</a>
                <ul class="secondary">
                    <li class="secondary-item"><a href="#">P2 - Secondary 1</a>
                        <ul class="tertiary">
                            <li class="tertiary-item"><a href="#">P2 - S1 - Tertiary 1</a></li>
                            <li class="tertiary-item"><a href="#">P2 - S1 - Tertiary 2</a></li>
                        </ul>
                    </li>
                    <li class="secondary-item"><a href="#">P2 - Secondary 2</a>
                        <ul class="tertiary">
                            <li class="tertiary-item"><a href="#">P2 - S2 - Tertiary 1</a></li>
                            <li class="tertiary-item"><a href="#">P2 - S2 - Tertiary 2</a></li>
                        </ul>
                    </li>
                    <li class="secondary-item"><a href="#">P2 - Secondary 3</a>
                        <ul class="tertiary">
                            <li class="tertiary-item"><a href="#">P2 - S3 - Tertiary 1</a></li>
                            <li class="tertiary-item"><a href="#">P2 - S3 - Tertiary 2</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>

jQuery:

 function closeTertiaryMenus() {
            $('ul.tertiary').each(function(index) {
                if ($(this).css('display') == 'block') {
                   $(this).hide();
                }
            });
        }
        function removeSecActBtnClr() {
            $('nav li.secondary-item > a').each(function(index) {           
                $(this).removeClass();
            });
        }

        $('nav li.primary-item > a').click(function() { 
             closeTertiaryMenus();
             removeSecActBtnClr();
        });

        $('nav a').click(function() {
            // show/hide child menu
            $parent_li = $(this).parent('li');
            $parent_li.siblings().find('ul').hide();
            $parent_li.children('ul').toggle();

            $parent_li.siblings().find('a').removeClass(); 
            $(this).toggleClass('btn-active'); 
        });

Answer 1

Change li.secondary-item to display: inline-block;