Jquery Select parent li a if child element active

essiprog

New Member
I spent hours looking for a CSS only then jQuery solution for this. I've seen this everywhere but not sure how to do one from the scratch. What I want to do is, I have a menu as a list, and another list in it, and another. So this is a three level horizontal menu. What I want to do is, when a child is selected, I want to change the background colour of the parent \[code\]li a\[/code\] so it looks like breadcrumbs if you know what i mean. This is my current css\[code\].menu { z-index: 9999; position:relative; background-image: url(images/top_nav_lili_repeat.png); background-repeat: repeat-x; height:38px; font-family: 'Open Sans', sans-serif; text-transform:uppercase;}.menu ul ul { display: none;}.menu ul li:hover > ul { display: block;}.menu ul { color: #797979; padding: 0 0px; list-style: none; position: relative; display: inline-table;}.menu ul:after { content: ""; clear: both; display: block;}.menu ul li { float: left;}.menu ul li:hover { background: #4b545f;}.menu ul li:hover a { color: #EBAD2D;}.menu li a.seleted ul li a{ background-color:#ff0000;}.menu ul li a { display: block; padding: 11px 16px; color: #bbb; text-decoration: none;}.menu ul li a.selected { background-color:#ff0000;}.menu ul ul { background: #5f6975; border-radius: 0px; padding: 0; position: absolute; top: 100%; width: 200px;}.menu ul ul li { float: none; border-top: 1px solid #6b727c; border-bottom: 1px solid #575f6a; position: relative;}.menu ul ul li a { padding: 10px 16px; color: #fff;}.menu ul ul li a:hover { background: #4b545f;}.menu ul ul ul { position: absolute; left: 100%; top: 0;}\[/code\]and my current HTML menu looks like this.\[code\]<div class="menu"> <ul> <li><a href="http://stackoverflow.com/questions/13836296/#" title="Menu Item 1">Home</a> <ul> <li><a href="http://stackoverflow.com/questions/13836296/#" title="Sub-Menu Item 1">Home link 1</a> <ul> <li><a href="http://stackoverflow.com/questions/13836296/#" title="Sub-Sub-Menu Item 1">Home Link 1 Link 1</a></li> <li><a href="http://stackoverflow.com/questions/13836296/#" title="Sub-Sub-Menu Item 2">Home Link 1 Link 2</a></li> <li><a href="http://stackoverflow.com/questions/13836296/#" title="Sub-Sub-Menu Item 3">Home Link 1 Link 3</a></li> </ul> </li> <li><a href="http://stackoverflow.com/questions/13836296/#" title="Sub-Menu Item 2">About</a> <ul> <li><a href="http://stackoverflow.com/questions/13836296/#" title="Sub-Sub-Menu Item 1">About 1</a></li> <li><a href="http://stackoverflow.com/questions/13836296/#" title="Sub-Sub-Menu Item 2">About 2</a></li> <li><a href="http://stackoverflow.com/questions/13836296/#" title="Sub-Sub-Menu Item 3">About 3</a></li> </ul> </li> <li><a href="http://stackoverflow.com/questions/13836296/#" title="Sub-Menu Item 3">Contact</a> <ul> <li><a href="http://stackoverflow.com/questions/13836296/#" title="Sub-Sub-Menu Item 1">Contact 1</a></li> <li><a href="http://stackoverflow.com/questions/13836296/#" title="Sub-Sub-Menu Item 2">Contact 2</a></li> <li><a class="selected" href="http://stackoverflow.com/questions/13836296/#" title="Sub-Sub-Menu Item 3">Contact 3</a></li> </ul> </li> </ul> </li></ul> </div>\[/code\]If you look at the last \[code\]li a\[/code\] \[code\]Contact 3\[/code\] I have a class attached to it as \[code\]selected\[/code\], my CMS will add this class to the selected element. So What I want to do is change the background colour of the parent \[code\]<a>Contact</a>\[/code\] and the \[code\]<a>Home</a>\[/code\] with css or Jquery and I want this to crossbrowser compatible too. Thanks heaps guys.Heres a fiddle : http://jsfiddle.net/8s3Bc/
 
Back
Top