I've searched for an answer to my problem high and low but can't seem to find something that works. I'm new to jquery and code, so bear with me. I have a vertical accordion navigation menu with nested links. I provided a fiddle with what I have so far. Don't mind the squares next to 'shop' and 'about'. Here is what I have working so far:

1. When I click on a parent menu in the accordion, it opens to an
active state with the parent highlighted like I want it and the +
sign turning in to a - sign. When I hover over a child link in
the same parent menu it also highlights like the parent. Perfect.
2. When I click on a child link and the new page loads, the accordion
menu that the child was in remains open to indicate which menu I'm
currently in. So far so good.

But here is where I run in to the problem...

1. When I click on a child link and the new page loads, the accordion
menu remains open BUT without the highlighted active state. I want
the current child link AND it's parent element to both stay
highlighted to show exactly which page I'm on.

[FIDDLE](http://jsfiddle.net/ocmsa5rg/)

I hope this all makes sense and I've provided enough information. I've tried many things, including changing my entire accordion menu. But nothing has worked. Please help!

Code:

```js
$(document).ready(function () {

    $('#cssmenu > ul > li ul').each(function (index, e) {
        var count = $(e).find('li').length;
        var content = '<span class=\"cnt\">' + count + '</span>';
        $(e).closest('li').children('a').append(content);
    });
    $('#cssmenu ul ul li:odd').addClass('odd');
    $('#cssmenu ul ul li:even').addClass('even');
    $('#cssmenu > ul > li > a').click(function () {
        $('#cssmenu li').removeClass('active');
        $(this).closest('li').addClass('active');
        var checkElement = $(this).next();
        if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
            $(this).closest('li').removeClass('active');
            checkElement.slideUp('normal');
        }
        if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
            $('#cssmenu ul ul:visible').slideUp('normal');
            checkElement.slideDown('normal');
        }
        if ($(this).closest('li').find('ul').children().length == 0) {
            return true;
        } else {
            return false;
        }
    });
});

$(document).ready(function () {
    if (window.location.href.indexOf("#shop-nikki-lexi") > -1) {
        $('.drop-link-1').closest(".sub-level-1").css("display", "block");
    }
});

$(document).ready(function () {
    if (window.location.href.indexOf("#about-nikki-lexi") > -1) {
        $('.drop-link-2').closest(".sub-level-2").css("display", "block");
    }
});
```

```css
/* Base Styles */
 * {
    margin: 0;
    padding: 0;
}
#cssmenu, #cssmenu ul, #cssmenu li, #cssmenu a {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    font-weight: normal;
    text-decoration: none;
    line-height: 1;
    font-family:"open-sans";
    font-size: 15px;
    position: relative;
    text-transform:uppercase;
    text-align:left;
}
#cssmenu a {
    line-height: 1.3;
}
#cssmenu {
    width: auto;
    padding: 20px 0px;
}
#cssmenu > ul > li > a:link {
    padding-right: 40px;
    display: block;
    background: #000000;
    color: #f1f1f1;
    border-bottom:none;
    text-transform: uppercase;
}
#cssmenu > ul > li > a:visited {
    text-decoration: none;
    color:#f1f1f1;
}
#cssmenu > ul > li > a:focus {
    text-decoration: none;
    color:#f1f1f1;
}
#cssmenu > ul > li > a:hover {
    text-decoration: none;
    color:#808080;
}
#cssmenu > ul > li > a:active {
    text-decoration: none;
    color:#808080;
}
#cssmenu > ul > li > a > span {
    background: #000000;
    padding: 0;
    display: block;
    font-size: 15px;
    font-weight: 400;
}
#cssmenu > ul > li.active {
    border-bottom: none;
}
#cssmenu > ul > li.active > a {
    color: #808080;
}
#cssmenu > ul > li.has-sub.active > a {
    color:#808080;
}
#cssmenu > ul > li.active > a span {
    background: #000000;
}
#cssmenu span.cnt {
    display:none;
    position: absolute;
    top: 8px;
    right: 15px;
    padding: 0;
    margin: 0;
    background: none;
}
/* Sub menu */
 #cssmenu ul ul {
    display: none;
}
#cssmenu ul ul li {
    border: none;
    border-top: 0;
}
#cssmenu ul ul a {
    padding: 2px 0 2px 22px;
    display: block;
    color: #f1f1f1;
    font-size: 12px;
    background-color:#000;
}
#cssmenu ul ul {
    padding:5px 0px;
}
#cssmenu ul ul a:hover {
    color: #808080;
}
#cssmenu ul ul li.odd {
    background: #f4f4f4;
}
#cssmenu ul ul li.even {
    background: #fff;
}
#shop:before {
    content:"\e708 ";
    font-size:13px;
    line-height:1;
    font-family:'icomoon';
}
#cssmenu > ul > li.active > a span#shop:before {
    content:"\e707 ";
    font-size:13px;
    line-height:1;
    font-family:'icomoon';
}
#cssmenu > ul > li.has-sub {
    margin-left:-2px;
}
.current-menu:before {
    content:"\e707 ";
    font-size:13px;
    line-height:1;
    font-family:'icomoon';
    color:#808080;
}
#cssmenu > ul > li > a.selected {
    color:#808080;
}
#copy {
    font-size:10px;
    opacity:.4;
    position:absolute;
    bottom:0;
    text-align:left;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id='cssmenu'>
    <ul>
        <li><a href='/'><span>Home</span></a>

        </li>
        <li class='has-sub'><a href='#shop-nikki-lexi'><span id="shop">Shop</span></a>

            <ul class="sub-level-1" style="display:none;">
                <li><a class="drop-link-1" href='/products/#shop-nikki-lexi'><span>All Products</span></a>

                </li>
                <li><a class="drop-link-1" href='/category/apparel-tops/#shop-nikki-lexi'><span>Tops</span></a>

                </li>
                <li class='last'><a class="drop-link-1" href='/category/apparel-bottoms/#shop-nikki-lexi'><span>Bottoms</span></a>

                </li>
            </ul>
        </li>
        <li class='has-sub'><a href='#about-nikki-lexi'><span id="shop">About</span></a>

            <ul class="sub-level-2" style="display:none;">
                <li><a class="drop-link-2" href='/the-story/#about-nikki-lexi'><span>The Story</span></a>

                </li>
                <li class='last'><a class="drop-link-2" href='/faq/#about-nikki-lexi'><span>FAQ</span></a>

                </li>
            </ul>
        </li>
        <li class='last'><a href='/contact-nikki-lexi'><span>Contact</span></a>

        </li>
    </ul>
</div>
```