Выделение активного пункта меню
 

Здравствуйте. Есть выпадающее меню на css. Хочется сделать подсветку активного пункта меню (родителя), но пока не выходит. Перепробованные варианты готовых кодов Javascript, не добавляют новый класс активному пункту. Буду благодарен за любую помощь.

<ul id="cssmenu">
        <li><a href="http://site.ru/">Главная</a>
                <ul>
                        <li><a href="http://site.ru/o-kompanii">О компании</a></li>
                        <li><a href="http://site.ru/collective">Наш коллектив</a></li>
                </ul>
        </li>
        <li><a href="http://site.ru/product">Наша продукция</a>
                <ul>
                        <li><a href="http://site.ru/product-1">Ссылка 1</a></li>
                        <li><a href="http://site.ru/product-2">Ссылка 2</a></li>
                        <li><a href="http://site.ru/product-3">Ссылка 3</a></li>
                        <li><a href="http://site.ru/product-4">Ссылка 4</a></li>
                        <li><a href="http://site.ru/product-5">Ссылка 5</a></li>
                </ul>
        </li>
        <li><a href="http://site.ru/contacts">Контакты</a>
        </li>
</ul>

ul#cssmenu {
        width:350px;
        margin: 0;
        border: 0 none;
        padding: 0;
        list-style: none;
        background: #003366;
        height: 30px;
        font: bold 12px/28px Verdana, Arial;
        border-left:#003366 1px solid;
}

ul#cssmenu li {
        margin: 0;
        border: 0 none;
        padding: 0;
        float: left;
        display: inline;
        list-style: none;
        position: relative;
        height: 30px;
}

ul#cssmenu ul {
        margin: 0;
        border: 0 none;
        padding: 0;
        width: 160px;
        list-style: none;
        display: none;
        position: absolute;
        top: 30px;
        left: 0;
}

ul#cssmenu ul:after {
        clear: both;
        display: block;
        font: 1px/0px serif;
        content: ".";
        height: 0;
        visibility: hidden;
}

ul#cssmenu ul li {
        width: 150px;
        float: left;
        display: block !important;
        display: inline;
}

/* Main Menu */
ul#cssmenu a {
        border: 0px;
        padding: 0 10px;
        float: none !important;
        float: left;
        display: block;
        background: #003366;
        color: #FFFFFF;
        font: bold 12px/28px Verdana, Arial;
        text-decoration: none;
        height: auto !important;
        height: 1%;
}

/* Main Menu Hover */
ul#cssmenu a:hover,
ul#cssmenu li:hover a,
ul#cssmenu li.iehover a {
        background: #FFFFFF;
        color:#003366;
        border-top:#003366 1px solid;
}

/* Second Menu */
ul#cssmenu li:hover li a,
ul#cssmenu li.iehover li a {
        border-top: 2px solid #FFFFFF;
        float: none;
        background: #003366;
        color: #FFFFFF;
}

/* Second Menu Hover */
ul#cssmenu li:hover li a:hover,
ul#cssmenu li:hover li:hover a,
ul#cssmenu li.iehover li a:hover,
ul#cssmenu li.iehover li.iehover a {
        border-top: 2px solid #FFFFFF;
        background: #FFFFFF;
        color:#003366;
        border:#003366 1px solid;
}

ul#cssmenu ul ul {
        display: none;
        position: absolute;
        top: 0;
        left: 170px;
}

ul#cssmenu li:hover ul ul,
ul#cssmenu li.iehover ul ul {
        display: none;
}

ul#cssmenu li:hover ul,
ul#cssmenu ul li:hover ul,
ul#cssmenu li.iehover ul,
ul#cssmenu ul li.iehover ul {
        display: block;
}

JavaScript добавлен для правильного отображения меню в браузерах IE.

function cssmenuhover()
{
        if(!document.getElementById("cssmenu"))
                return;
        var lis = document.getElementById("cssmenu").getElementsByTagName("LI");
        for (var i=0;i<lis.length;i++)
        {
                lis[i].onmouseover=function(){this.className+=" iehover";}
                lis[i].onmouseout=function() {this.className=this.className.replace(new RegExp(" iehover\\b"), "");}
        }
}
if (window.attachEvent)
        window.attachEvent("onload", cssmenuhover);

Andreij45,

$(function(){
     var url = window.location.href;
     $('[href="'+url+'"]').parents("ul").prev().addClass("active")
   })

Рони, спасибо большое! Подсветка родительского пункта работает. Но не могли бы вы еще подсказать что сделать, чтобы при нажатии на "Контакты" они тоже выделялись.

Andreij45,

$(function(){
     var url = window.location.href;
     var a = $('[href="'+url+'"]');
     url.indexOf("contacts") == -1 && (a = a.parents("ul").prev());
     a.addClass("active")
   })

Спасибо :thanks: