I have maintained my code like this but when i click on link that is not highlighted.
Css code:
.activeanchor
{
color:#333;
text-decoration:none;
width:auto;
border-radius:4px 4px 4px 4px;
background-color:#FFD47B;
padding-bottom:2px;
padding-top:2px;
padding-left:10px;
padding-right:5px;
}
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
margin: 0;
padding: 0;
position: relative;
}
#cssmenu:after,
#cssmenu ul:after {
content: '';
display: block;
clear: both;
}
#cssmenu a {
color: #ffffff;
display: inline-block;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
font-size: 11px;
min-width: 35px;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 0 #333333;
}
#cssmenu ul {
list-style: none;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu > ul > li.active a {
background: #8a8a8a url(images/grad_dark.png) repeat-x left bottom;
background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(100%, #4a4a4a));
background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 100%);
background: -o-linear-gradient(top, #646464 0%, #4a4a4a 100%);
background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 100%);
background: linear-gradient(to bottom, #646464 0%, #4a4a4a 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#646464', endColorstr='#4a4a4a', GradientType=0);
box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222;
-moz-box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222;
-webkit-box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222;
filter: none;
}
#cssmenu > ul > li.active a:hover {
background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(100%, #4a4a4a));
background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 100%);
background: -o-linear-gradient(top, #646464 0%, #4a4a4a 100%);
background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 100%);
background: linear-gradient(to bottom, #646464 0%, #4a4a4a 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#646464', endColorstr='#4a4a4a', GradientType=0);
filter: none;
}
#cssmenu > ul > li a {
box-shadow: inset 0 0 0 1px #8a8a8a;
-moz-box-shadow: inset 0 0 0 1px #8a8a8a;
-webkit-box-shadow: inset 0 0 0 1px #8a8a8a;
background: #4a4a4a url(images/grad_dark.png) repeat-x left top;
background: -moz-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8a8a8a), color-stop(50%, #707070), color-stop(51%, #626262), color-stop(100%,
#787878));
background: -webkit-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
background: -o-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
background: -ms-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
background: linear-gradient(to bottom, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a', endColorstr='#787878', GradientType=0);
border-bottom: 1px solid #5d5d5d;
border-top: 1px solid #5d5d5d;
border-right: 1px solid #5d5d5d;
line-height: 28px;
padding: 0 20px;
filter: none;
}
#cssmenu > ul > li a:hover {
background: #8a8a8a url(images/grad_dark.png) repeat-x left bottom;
background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(50%, #4a4a4a), color-stop(51%, #3b3b3b), color-stop(100%,
#525252));
background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
background: -o-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
background: linear-gradient(to bottom, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a', endColorstr='#787878', GradientType=0);
filter: none;
}
#cssmenu > ul > li:first-child a {
border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
border-left: 1px solid #5d5d5d;
}
#cssmenu > ul > li:last-child a {
border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
}
#cssmenu .has-sub:hover ul {
display: block;
}
#cssmenu .has-sub ul {
display: none;
position: absolute;
top: 28px;
left: -1px;
min-width: 100%;
text-align: center;
*width: 100%;
}
#cssmenu .has-sub ul li {
text-align: center;
z-index:1;
}
#cssmenu .has-sub ul li a {
border-top: 0 none;
border-left: 1px solid #5d5d5d;
display: block;
line-height: 120%;
padding: 9px 5px;
text-align: center;
}
#cssmenu .has-sub1:hover ul {
display: inline-block;
}
#cssmenu .has-sub1 ul {
display: none;
position: absolute;
top: 28px;
left: -1px;
min-width: 100%;
text-align: center;
*width: 100%;
}
#cssmenu .has-sub1 ul li {
text-align: center;
z-index:1;
}
#cssmenu .has-sub1 ul li a {
border-top: 0 none;
border-left: 1px solid #5d5d5d;
display: block;
line-height: 120%;
padding: 9px 5px;
text-align: center;
}
Asp.net code with javascript:
<script type="text/javascript">
$(document).ready(function () {
$('.cssmenu.has-sub ul li a').each(function (index) {
if (this.href.trim() == window.location)
$(this).addClass("activeanchor");
});
});
</script>
<ul><li class='has-sub'><a href='Home.aspx'><span>Home</span></a></li>
<li class='has-sub'><a href='#'><span>Organisation</span></a>
<ul>
<li class='has-sub'><a href="../OrganizationStructure/frmBusinessUnit.aspx"><span>Business Unit</span></a> </li>
</ul>
</li>
<li class='has-sub'><a href="../EmployeeMaster/frmEmployeeSearch.aspx"><span>Employee</span></a> </li>
</ul>