Добрый вечер друзья, пытаюсь сделать активную ссылку в меню, что то не получается.
Имею меню
<ul id="nav">
<li >
<a href="#" class="sub">LUXURY</a>
<ul class="nav-child unstyled small">
<li class="item-141"><a href="/">Односторонний</a></li>
<li class="item-142"><a href="/">Подвесной</a></li>
<li class="item-143"><a href="/">Двусторонний</a></li>
</ul>
</li>
</ul>
Имею CSS
#nav {
box-shadow:2px 2px 8px #000000;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
#nav, #nav ul {
list-style:none;
padding:0;
width:200px;
}
#nav ul {
position:relative;
z-index:-1;
}
#nav li {
position:relative;
z-index:100;
}
#nav ul li {
margin-top:-23px;
-moz-transition: 0.4s linear 0.4s;
-ms-transition: 0.4s linear 0.4s;
-o-transition: 0.4s linear 0.4s;
-webkit-transition: 0.4s linear 0.4s;
transition: 0.4s linear 0.4s;
}
#nav li a {
display: block;
font-weight: bold;
line-height: 28px;
outline: 0;
padding-left: 15px;
color: #fff;
font-size: 20px;
text-decoration: none;
background: #000;
}
#nav li a.sub {
}
#nav li a + img {
cursor:pointer;
display:none;
height:28px;
left:0;
position:absolute;
top:0;
width:200px;
}
#nav li a img {
border-width:0px;
height:24px;
line-height:28px;
margin-right:8px;
vertical-align:middle;
width:24px;
}
#nav li a:hover {
background-color:#bcbdc1;
}
#nav ul li a {
background-color: #fff;
color: #000;
font-size: 15px;
line-height: 22px;
}
#nav ul li a:hover {
color:#444;
}
#nav ul li a img {
background: url("../images/bulb.png") no-repeat;
border-width:0px;
height:16px;
line-height:22px;
margin-right:5px;
vertical-align:middle;
width:16px;
}
#nav ul li:nth-child(odd) a img {
background:url("../images/bulb2.png") no-repeat;
}
#nav a.sub:focus {
background:#bcbdc1;
outline:0;
}
#nav a:focus ~ ul li {
margin-top:0;
-moz-transition: 0.4s linear;
-ms-transition: 0.4s linear;
-o-transition: 0.4s linears;
-webkit-transition: 0.4s linears;
transition: 0.4s linear;
}
#nav a:focus + img, #nav a:active + img {
display:block;
}
#nav a.sub:active {
background:#bcbdc1;
outline:0;
}
#nav a:active ~ ul li {
margin-top:0;
}
#nav ul:hover {
display:block;
}
a{text-decoration:none;color:#999;}
a:hover{color:#666;}
a.act{color:#F00;}
И имею JS код
<script type="text/javascript">
try{
var el=document.getElementById('msgText').getElementsByTagName('a');
var url=document.location.href;
for(var i=0;i<el.length; i++){
if (url==el[i].href){
el[i].className += ' act';
};
};
}catch(e){}
</script>
Но при нажатие ссылку перехожу, но не показывается что ссылка Активная.
Не расскрыто меню и сама ссылка выделения другим цветом, почему?
Простой
