How to highlight active parent in ASP.NET

Question

I have a some JavaScript that adds a class active to the current menu item on my page. I am using a master page, my code works although it does not give the parent menu item an active class. For example when in a page from the drop down menu in products I want products to have the active class as well. Because no one can see what the active class is, unless they open the drop down. I have researched this question for two days before posting this, nothing has worked. Does anybody have any tips?

JavaScript in "head"

        $(document).ready(function () {
            var url = window.location;
            $('#aps_menu ul.nav li a').each(function () {
                if (this.href == url) {
                    $("ul.nav li").each(function () {
                        if ($(this).hasClass("active")) {
                            $(this).removeClass("active");
                        }
                    });
                    $(this).parent().addClass('active');
                }
            });
        });

Site.Master

<div id="aps_menu" class="navbar-collapse collapse" runat="server">
    <ul class="nav navbar-nav navbar-right" runat="server">
        <li id="homepage" runat="server"><a runat="server" href="~/">HOME</a></li>
        <li id="services" runat="server"><a runat="server" href="~/Services/">SERVICES</a></li>
        <li id="drop-toggle" class="dropdown">
        <a id="products" runat="server" href="~/Products/" class="dropdown-toggle" data-toggle="dropdown">PRODUCTS <span class="caret"></span></a>
        <div class="dropdown-background">
            <div class="container">
                <div style="margin-top: 0 !important;" class="col-sm-8">
                    <ul class="col-md-6 col-sm-5" role="menu">
                        <h3>Web Development</h3>
                        <li class="DropNavLI"><strong>></strong> <a runat="server" href="~/Products/Bootstrap-Templates/"> Bootstrap</a></li>
                        <li class="DropNavLI"><strong>></strong> <a runat="server" href="#"> ASP.NET Framework</a></li>
                        <li class="DropNavLI"><strong>></strong> <a runat="server" href="#"> Basic HTML</a></li>
                        <li class="DropNavLI"><strong>></strong> <a runat="server" href="#"> Featured</a></li>
                        <li class="DropNavLI"><strong>></strong> <a runat="server" href="#"> On Sale</a></li>
                    </ul>
                    <ul class="col-md-6 col-sm-5" role="menu">
                        <h3>Graphic Design</h3>
                        <li class="DropNavLI"><strong>></strong> <a runat="server" href="#"> Abstract</a></li>
                        <li class="DropNavLI"><strong>></strong> <a runat="server" href="#"> Vector Based</a></li>
                        <li class="DropNavLI"><strong>></strong> <a runat="server" href="#"> Backgrounds</a></li>
                        <li class="DropNavLI"><strong>></strong> <a runat="server" href="#"> Featured</a></li>
                        <li class="DropNavLI"><strong>></strong> <a runat="server" href="#"> On Sale</a></li>
                    </ul>
                    <ul class="col-md-6 col-sm-5" role="menu">
                        <h3>Photography</h3>
                        <li class="DropNavLI"><strong>></strong> <a runat="server" href="#"> Animals</a></li>
                        <li class="DropNavLI"><strong>></strong> <a runat="server" href="#"> Nature</a></li>
                        <li class="DropNavLI"><strong>></strong> <a runat="server" href="#"> Landscape</a></li>
                        <li class="DropNavLI"><strong>></strong> <a runat="server" href="#"> Featured</a></li>
                        <li class="DropNavLI"><strong>></strong> <a runat="server" href="#"> On Sale</a></li>
                    </ul>
                    <ul class="col-md-6 col-sm-5" role="menu">
                        <h3>All Products</h3>
                        <li class="DropNavLI"><strong>></strong> <a runat="server" href="#"> Free</a></li>
                        <li class="DropNavLI"><strong>></strong> <a runat="server" href="#"> Featured</a></li>
                        <li class="DropNavLI"><strong>></strong> <a runat="server" href="#"> On Sale</a></li>
                        <li class="DropNavLI"><strong>></strong> <a runat="server" href="#"> Featured</a></li>
                        <li class="DropNavLI"><strong>></strong> <a runat="server" href="#"> Free</a></li>
                    </ul>
                </div>
                <div class="col-xs-7 col-sm-4" role="navigation">
                    <ul role="menu" runat="server">
                        <li runat="server"><img class="dropdown-image" style="width: 100%; margin-top: 25px;" runat="server" src="~/images/SoftwareLanguages.png" /></li>
                    </ul>
                </div>
            </div>
        </div>
        </li>
        <li id="account" runat="server"><a runat="server" href="~/Account/Manage/">ACCOUNT</a></li>
        <li id="forums" runat="server"><a runat="server" href="~/Forums/">FORUMS</a></li>
        <li id="contact" runat="server"><a runat="server" href="~/Contact/">CONTACT</a></li>
    </ul>
</div>

Answer 1

If your markup is structured as nested ul tags, I would guess something along these lines would do it:

$("ul.nav li").removeClass("active");
$("#aps_menu ul.nav li:has(a[href='" + window.location + "'])").addClass("active").closest("li").addClass("active");

In pseudo:

• Remove all active tags
• Find li with matching a tag with correct href
• Add active to that li and also any other li tags it's nested inside of up the ancestry tree.