a link active state is not working

I have this simple yet frustrating problem regarding my link css.
I know what's the problem is but can't seems to fix it.

I develop a website using Joomla 1.6 and working on the menu and sub menu.
I want the menus have hover and active state and for the submenu it's working great but the menu itself, it doesn't work at all. The hover can work but not the active state.

This is the html looks like



<ul class="the_menu">

<li id="current" class="active parent item131">
<a class="food-service-desc active" href="/Joomla4/index.php/food-service-desc">
<img class="art-menu-image" src="/Joomla4/images/food.jpg" alt="food service desc" /></a>
<ul class="category">
<li class="item133">
<a href="/Joomla4/index.php/food-service-desc/nigiri-top">
<img class="art-menu-image" src="/Joomla4/images/nigiri.jpg" alt="Nigiri Top" /></a>
</li>
<li class="item134">
<a href="/Joomla4/index.php/food-service-desc/sliced-sushi-rolls">
<img class="art-menu-image" src="/Joomla4/images/sliced.jpg" alt="sliced sushi rolls" /></a>
</li>
<li class="item135"><a href="/Joomla4/index.php/food-service-desc/others">
<img class="art-menu-image" src="/Joomla4/images/other.jpg" alt="others" /></a></li>
</ul>
</li>

<li class="item132">
<a href="/Joomla4/index.php/retail-desc">
<img class="art-menu-image" src="/Joomla4/images/retail-text.jpg" alt="retail desc" /></a></li></ul>


The problem here is the second line, <li id="current" class="active parent item131">

right now my css is like this

li.item131 {
width:142px;display: block;
overflow: hidden;

}

ul .the_menu li #current a {
margin-left:-142px; overflow:visible;
}

li.item131 a:hover {
display:block; margin-left:-142px; overflow:visible;
position: relative;
}


As you can see the first state is too global that it overrides the css when the li is current.
Can anyone give any suggestion how to fix it?
I have tried many ways but still can't figured it out after two whole days.
Help please.

Thanks a lot

margin-left:-142px; overflow:visible;

Is this what you want to apply when the li has an id of current?

If so:

li.item131#current {
margin-left: -142px;
overflow: visible;
}


Tip: you can have class definitions without addressing a specific element.

Hi Apostropartheid

thanks a lot for the reply.
However, I've tried that before and retied it again after your post and it's not working.
I guess the

li.item131 {
width:142px;display: block;
overflow: hidden;

}

override

li.item131 #current a {
margin-left:-142px !important; overflow:visible!important;
}

??
But I am also not sure.
Any more ideas?

Hi Apostropartheid

thanks a lot for the reply.
However, I've tried that before and retied it again after your post and it's not working.
I guess the

li.item131 {
width:142px;display: block;
overflow: hidden;

}

override

li.item131 #current a {
margin-left:-142px !important; overflow:visible!important;
}

??
But I am also not sure.
Any more ideas?

No, that's not the same thing.

li.item131 #current a points to this:


<ul>
<li class="item131">
<ul>
<li id="current">
<a></a>
</li>
</ul>
</li>
</ul>


li.item131#current matches this:


<ul>
<li class="item131" id="current></li>
</ul>

dont know if this helps but in one of my webpages I have the following CSS

#menu ul a.active { background:url(images/menu_active.gif) no-repeat bottom center;
color:#000000;}

and then in the main code I have


<div id="menu">
<!-- This active page is for the PDF floorplans-->
<ul>
<li><a href="#" class="active">Main Page</a></li>
<li><a href="Floorplans.htm">Floorplans</a></li>
<li><a href="Help.htm">Help</a></li>
<li><a href="Contact.htm">Contact</a></li>
</ul>
<!-- This is where the menu div closes-->
</div>
HTH

To escostar75,

It will work by using your code. Thanks heaps! However, the submenu now also in active state as well even though it's not in the page.

Now the code is

li.item131.active a{
margin-left:-142px;
overflow:visible;
}