JSFiddle - React, Tailwind, and code Playground

by mori57

HTML

<div class="second-level-menu-vertical">
        <ul class="top-level">
            <li><a href="K-5th-Grades.aspx">K-5th Grades</a></li>
            <li><a href="6th-grade.aspx">6th Grade</a></li>
            <li><a href="7th-grade.aspx">7th Grade</a></li>
            <li><a href="8th-grade.aspx">8th Grade</a></li>
            <li><a href="9th-grade.aspx" class="selected">9th Grade</a></li>
            <li><a href="10th-grade.aspx">10 Grade</a></li>
            <li><a href="11th-grade.aspx">11th Grade</a></li>
            <li><a href="12th-grade.aspx">12th Grade</a></li>
            <li><a href="college-checklist.aspx">College Checklist</a></li>
            <li><a href="savings-growth-calculator.aspx">Savings Growth Calculator</a></li>
        </ul>
    </div>

CSS

.second-level-menu-vertical {
        float: left;
        font:bold 110% 'verdana', sans-serif;
        margin-left: -10px;
        margin-top: 57px;
        text-transform: lowercase;
        width: 155px;
        z-index: 200;
        position: absolute;
    }
    .second-level-menu-vertical ul {
        padding-bottom: 10px;
    }
    .second-level-menu-vertical li {
        background: none;
        margin: 0;
        padding: 0 0.75em;
    }
    .second-level-menu-vertical li a,
    .second-level-menu-vertical li a:link,
    .second-level-menu-vertical li a:visited,
    .second-level-menu-vertical li a:hover,
    .second-level-menu-vertical li a:active {
        border-bottom: 1.75px dashed #C9C9C9;
        color: #666;
        display: block;
        padding: 1em 0;
        text-decoration: none;
    }
    
    .second-level-menu-vertical li a:hover,
    .second-level-menu-vertical li a.selected,
    .second-level-menu-vertical li a.selected:link,
    .second-level-menu-vertical li a.selected:visited,
    .second-level-menu-vertical li a.selected:hover,
    .second-level-menu-vertical li a.selected:active {
        background-color: #FDCC00;
        border-radius: 7px;
        color: #000;
        text-decoration: underline;
    }

JavaScript

// you want the path of the location, 
    // as that should not include the querystring, 
    // if you have one
    var pathGroup = location.pathname.split("/");
    // split it by the / character
    // then get the last element... this should be your
    // current page name
    var currentPage = pathGroup[pathGroup.length - 1];
    // This selector finds the a tag that 
    // has an href matching your currentPage
    // variable. It then adds a selected class
    // to that a tag
    var menuItems = $(".second-level-menu-vertical li a[href~='" + currentPage + "']").addClass("selected");