title: How to add a hover transition effect on the navigation?
body: <p>I am asking a specific question about a specific problem that I don't know how to do but would like to add to my site.</p>
  
  <p>1) When the parent li has a child, I want that nav to stayed hovered with the effect applied when going through the child elements. Right now, when I am no longer hovered over it, it will lose its hover effect and apply hover effects on the child elements when I want the parent li to still have the hovered effect when going through the sub navigation.</p>
  
  <p>2)And the other thing I do not know how to do is transition effect when I hover over any navigation links, it will sort of have an fade in out effect when hovered in and out from. How do I do this?</p>
  
  <p>I attempted to do this:</p>
  
  <p>CSS:</p>
  
  <pre><code>#nav li:hover &gt; ul{ /*display sub menus when hovered over*/
      left:0; /*show menu when hovered*/
      z-index:100; /*places the sub nav in frontier of all elements*/
      transition: all 2.4s ease-in-out -2s; /*transition: property duration timing-function delay;*/
      -moz-transition: all 2.4s ease-in-out -2s;
      -webkit-transition: all 2.4s ease-in-out -2s;
  }
  </code></pre>
  
  <p>It brought about unexpected, but cool results of bringing out the submenus, sliding to the right. It's not what I intended, but okay. I just wanted the other two features applied but don't where to look. My full code is here: <a href="http://jsfiddle.net/QMXfK/4/" rel="nofollow">jsfiddle nav code</a></p>