title: How do i higlight parent when child is selected?
body: <p>I got a menu with childs. <br>
  I want to change the background on parent and child when a child is picked, and only change the background on parent when parent is picked.<br></p>
  
  <p>I've searched for it, but it seems like it just wont work. And i know that many have asked this question. I've tried doing it with jquery, but i can't get it right.<br></p>
  
  <p>My code so far is following:<br><br>
  <strong>HTML</strong><br></p>
  
  <pre><code>&lt;div class="menu"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a id="home" href="index.php"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="Programming.php"&gt;Programming Language&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="Programming_HTML.php"&gt;HTML&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="Project.php"&gt;Project&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="Project_Calculator.php"&gt;Calculator&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="Project_ImageSlider.php"&gt;Image Slider&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong><br></p>
  
  <pre><code>.menu { font-family: arial, sans-serif; width:1190px; text-align: center; font-size:11px; z-index:100;}
  .menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;  height:51px; text-align:center; color:#000; background:#ddd; line-height:50px; font-size:15px; overflow:hidden; box-shadow:inset 0 0 10px #000000;}
  .menu ul {padding:0; margin:0; list-style: none;}
  .menu ul li {float:left; position:relative; background: #F16529; width: 238px;}
  .menu ul li ul {display: none;}
  .menu ul li ul li a{ background:#36f;}
  .menu ul li ul li{margin-left: 10px; width: 215px; border-left: 1px solid #000; border-bottom: 1px solid #000; }
  .menu ul li a{border-right: 1px solid #000;}
  #home{border-left: 1px solid #000;}
  .menu ul li:hover a {color:#fff; background:#36f;}
  .menu ul li:hover ul {display:block; position:absolute; top:51px; left:0;}
  .menu ul li:hover ul li ul {display: none;}
  .menu ul li:hover ul li a {display:block; background:#ddd; color:#000;}
  .menu ul li:hover ul li a:hover {background:#FF6A00; color:#fff;}
  .menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}
  .menu ul li:hover ul li:hover ul.left {left:-105px;}
  </code></pre>
  
  <p><br>When it comes to the jquery, i'm thinking clickfunction.
  <br>I also know that i need to add an active class in the css.
  <br> You are welcome to check the menu out, it goes great with this div, around it.
  <br></p>
  
  <pre><code>#top-wrap{float:center; width: 100%; height: 51px; display: block; background-color: #000; -webkit-box-shadow: inset 0 10px 15px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 10px 15px rgba(0, 0, 0, 0.1); box-shadow: inset 0 10px 15px rgba(255, 255, 255, 0.6);}
  </code></pre>