title: Making a nested link system change it's <li> bg on hover of other <li>
body: <p>Hoping someone has the time to help me out with some jquery confusion?</p>
  
  <p>I am trying to get the parent of an elements background change when the child is hovered and then go back to its default when the childs hover has ended.</p>
  
  <p>The problem I have at the moment is with my script I cannot get the code to return the background colour to its default from the *.css file, when the hove ris lost the parents background remains the colour it was changed too.</p>
  
  <p>The Jquery::</p>
  
  <pre><code>$(document).ready(function() {
      $('ul.sf-menu li li li').hover(function() {
           var currentID = "#";
           currentID += $(this).parent().parent().attr('id');
  
           $('ul.sf-menu li li ul').parent(currentID).css('background', 'pink');
           $('ul.sf-menu li li li').focusout().css('background', '#00467F');
      });
  });
  </code></pre>
  
  <p>The HTML::</p>
  
  <pre><code>&lt;ul class="sf-menu"&gt;
      &lt;li id='education'&gt;&lt;a&gt;Education&lt;/a&gt;
          &lt;ul&gt;
              &lt;li class='education' id='6'&gt;&lt;a href='#' title='Desktops'&gt;Desktops&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li class='education2'&gt;&lt;a href='#' title='#'&gt;#&lt;/a&gt;&lt;/li&gt;
                      &lt;li class='education2'&gt;&lt;a href='#' title='#'&gt;#&lt;/a&gt;&lt;/li&gt;
                      &lt;li class='education2'&gt;&lt;a href='#' title='#'&gt;#&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
  
              &lt;li class='education' id='9'&gt;&lt;a href='#' title='#'&gt;#&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li class='education2'&gt;&lt;a href='#' title='#'&gt;#&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
  
              &lt;li class='education' id='11'&gt;&lt;a href='#' title='#'&gt;#&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li class='education2'&gt;&lt;a href='#' title='#'&gt;#&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
  
              &lt;li class='education' id='14'&gt;&lt;a href='#' title='#'&gt;#&lt;/a&gt;
                  &lt;ul&gt;
                       &lt;li class='education2'&gt;&lt;a href='#' title='#'&gt;#&lt;/a&gt;&lt;/li&gt;
                       &lt;li class='education2'&gt;&lt;a href='#' title='#'&gt;#&lt;/a&gt;&lt;/li&gt;
                       &lt;li class='education2'&gt;&lt;a href='#' title='#'&gt;#&lt;/a&gt;&lt;/li&gt;
                       &lt;li class='education2'&gt;&lt;a href='#' title='#'&gt;#&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Thank you in advance anyone that can shine a light on this problem for me.</p>