title: Jquery Select parent li a if child element active
body: <p>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. </p>
  
  <p>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. </p>
  
  <p>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. </p>
  
  <p>This is my current css</p>
  
  <pre><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 &gt; 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></pre>
  
  <p>and my current HTML menu looks like this.</p>
  
  <pre><code>&lt;div class="menu"&gt;
  
              &lt;ul&gt;
      &lt;li&gt;&lt;a href="#" title="Menu Item 1"&gt;Home&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#" title="Sub-Menu Item 1"&gt;Home link 1&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#" title="Sub-Sub-Menu Item 1"&gt;Home Link 1 Link 1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#" title="Sub-Sub-Menu Item 2"&gt;Home Link 1 Link 2&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#" title="Sub-Sub-Menu Item 3"&gt;Home Link 1 Link 3&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#" title="Sub-Menu Item 2"&gt;About&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#" title="Sub-Sub-Menu Item 1"&gt;About 1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#" title="Sub-Sub-Menu Item 2"&gt;About 2&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#" title="Sub-Sub-Menu Item 3"&gt;About 3&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#" title="Sub-Menu Item 3"&gt;Contact&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#" title="Sub-Sub-Menu Item 1"&gt;Contact 1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#" title="Sub-Sub-Menu Item 2"&gt;Contact 2&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a  class="selected" href="#" title="Sub-Sub-Menu Item 3"&gt;Contact 3&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  
  &lt;/ul&gt;
            &lt;/div&gt;
  </code></pre>
  
  <p>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>&lt;a&gt;Contact&lt;/a&gt;</code> and the <code>&lt;a&gt;Home&lt;/a&gt;</code> with css or Jquery and I want this to crossbrowser compatible too. Thanks heaps guys.</p>
  
  <p>Heres a fiddle : <a href="http://jsfiddle.net/8s3Bc/" rel="noreferrer">http://jsfiddle.net/8s3Bc/</a></p>