hi,
I am having problem in setting the mouseover on navigation menu.I want to "
highlight the current item"displayed on the page.But can not set the color value of the highlighted class through css.
my code is
<style>
#nav_menu ul li a
{
color:white;
font-size:16px;
font-weight:bold;
text-decoration:none;
float:left;
display:block;
padding:10px;
margin-right:40px;
}
#nav_menu ul li a:hover
{
background:#ffda0b;
color:#333;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.current_nav
{
background:#ffda0b;
color:red;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
</style>
<script>
//all the list item has a navi class applied to them
$(".navi").click(function()
{
$("#home_content").hide();
$(".inner_content").hide();
$("#content_bg").show();
var p_nav=$(this).attr("id");
$("#"+p_nav+"1").show();
$(".navi").removeClass("current_nav");
$(this).addClass("current_nav");
});
</script>
Problem is clicking on li tag is applying the current_nav class on it but without setting the color as red.
my guess is <a> tag is controlling the text color but don't know how to fix that?Please help.
Thanks
kingkol
