Can you help me figure out what's wrong with this code and how I can fix it?
I'm working on a CSS menu (horizontal) where I want the background and font to change when an item is selected. I found some jQuery code from another post that should make it work, but even after adding the code, the background and font don't change when I select an item. Any suggestions on how to solve this?
Here is the HTML snippet:
<ul id="menu_nav" class="buttons">
<li>
<a href="#" onclick="' . $menu_path . '">Item 1</a>
</li>
<li>
<a href="#" onclick="' . $menu_path . '">Item 2</a>
</li>
<li>
<a href="#" onclick="' . $menu_path . '">Item 3</a>
</li>
</ul>
And here is the corresponding CSS code:
ul#menu_nav
{
float:left;
width:790px;
padding:0;
margin:0;
list-style-type:none;
background-color:#000099;
}
ul#menu_nav a
{
float:left;
text-decoration:none;
color:white;
background-color:#000099;
padding:0.2em 0.6em;
border-right:1px solid #CCCCCC;
font-family: Tahoma;
font-size: 11px;
font-style: normal;
font-weight: bold;
position: relative;
height: 21px;
line-height:1.85em;
}
ul#menu_nav a:hover {
background-color:#F1F4FE;
color:#000099;
border-top:1px solid #CCCCCC;
}
ul#menu_nav li {display:inline;}
.selected {
background-color:#F1F4FE;
color:#000099;
border-top:1px solid #CCCCCC;
}
Lastly, here is the jQuery script being used:
$(function(){
$(".buttons li>a").click(function(){
$(this).parent().addClass('selected'). // <li>
siblings().removeClass('selected');
});
});