too long

I created the menu in my website like this. and I want to add active class to current page menu-item.

My menu codes:

<div class="menu-stili" role="main">
    <div id="menu-stili_bir">
        <?php
        $menular = Yii::app()->db->createCommand()
                    ->select('m.idmenu, m.menuparent_id, m.url, m.title_'.Yii::app()->language)
                    ->from ('menu m')
                    ->where('m.menuparent_id=0 and m.active="1"')
                    ->order('m.idmenu asc')->queryAll();

        echo "<ul class='menu' >";
        foreach($menular as $menu){
            if($menu['url'] == '#')
                $echoUrl = 'javascript:void(0);';
            else
                $echoUrl = $baseUrl.'/'.Yii::app()->language.$menu["url"];

            echo "<li>";
            echo "<a class='menu-li-a' href='".$echoUrl."' title='".$menu['title_'.Yii::app()->language]."'><strong>".$menu['title_'.Yii::app()->language]."</strong><span></span></a>";
        }
        echo "</ul>";
        ?>
    </div>
</div>

script

<script>
    $(document).ready(function() {
        $('.menu li a').on('click', function () {
            $('a', this).removeClass('menu-li-a').addClass('aktiv-menu');
        });
    });
</script>

style.css

.menu-stili {
    background: rgb(44,83,158);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJjNTM5ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyYzUzOWUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, rgb(44,83,158) 0%, rgb(44,83,158) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(44,83,158)), color-stop(100%,rgb(44,83,158)));
    background: -webkit-linear-gradient(top, rgb(44,83,158) 0%,rgb(44,83,158) 100%);
    background: -o-linear-gradient(top, rgb(44,83,158) 0%,rgb(44,83,158) 100%);
    background: -ms-linear-gradient(top, rgb(44,83,158) 0%,rgb(44,83,158) 100%);
    background: linear-gradient(to bottom, rgb(44,83,158) 0%,rgb(44,83,158) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c539e', endColorstr='#2c539e',GradientType=0 );
    padding: 10px;
    display: block;
    position: absolute;
    min-width: 850px;
    width: 98.5%;
    z-index: 2;
}

#menu-stili-bir {
    margin: 0 auto;
}   
.menu {
    padding-top: 7px;
    margin-left: 6%;
}
.menu li {
    float: left;
    position:relative;
    list-style: none;
}
.menu-li-a {
    display:inline-block;
    font-size:15px;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    line-height:1.2em;
    padding-bottom:10px;
    color: #cedce7;
    -webkit-transition: color 1s ease;
    -moz-transition: color 1s ease;
    -ms-transition: color 1s ease;
    -o-transition: color 1s ease;
    transition: color 1s ease;
    position:relative;
    overflow:hidden;
}
.aktiv-menu {
    display:inline-block;
    font-size:15px;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    line-height:1.2em;
    padding-bottom:10px;
    position:relative;
    overflow:hidden;
    color: #ffffff;
}
.menu li a:hover{
    color: #ffffff;
    -webkit-transition: color 1s ease;
    -moz-transition: color 1s ease;
    -ms-transition: color 1s ease;
    -o-transition: color 1s ease;
    transition: color 1s ease;
}
.menu li strong {
    display:inline-block;
    padding:0 15px;
    font-weight: normal;
}
.menu li span {
    display: block;
    height: 1.5px;
    background-color: white;
    position: absolute;
    bottom: 0;
}

The items comes from database. So I the CMenu did bot help me. I don't know the missing codes... Please help to solve problem. Thanks.

Your Javascript wont work because the page will be redirected to another page, you better handle adding the class in your PHP code:

$current_url = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
foreach($menular as $menu){
            if($menu['url'] == '#')
                $echoUrl = 'javascript:void(0);';
            else
                $echoUrl = $baseUrl.'/'.Yii::app()->language.$menu["url"];

if($menu['url'] == $current_url)
    $active_class='active';
else
    $active_class='';

            echo "<li>";
            echo "<a class='menu-li-a $active_class' href='".$echoUrl."' title='".$menu['title_'.Yii::app()->language]."'><strong>".$menu['title_'.Yii::app()->language]."</strong><span></span></a>";
        }

Hope you sort it out :)