title: How to highlight parent li text only on :hover?
body: <p>How to highlight Article only on mouse over? current when i hover on Article it highlights all child item also. Is it possible to highlight <strong>Articles</strong> only</p>
  
  <p>see example here <a href="http://jsbin.com/ubunu/2" rel="nofollow noreferrer">http://jsbin.com/ubunu/2</a></p>
  
  <pre><code>&lt;style&gt;
    li:hover {background:red}
  li li:hover {background:yellow}
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p id="hello"&gt;Hello World&lt;/p&gt;
    &lt;ul&gt;
  &lt;li&gt;Weblog&lt;/li&gt;
  &lt;li&gt;Articles
     &lt;ul&gt;
     &lt;li&gt;How to Beat the Red Sox&lt;/li&gt;
     &lt;li&gt;Pitching Past the 7th Inning
        &lt;ul&gt;
        &lt;li&gt;Part I&lt;/li&gt;
        &lt;li&gt;Part II&lt;/li&gt;
        &lt;/ul&gt;
     &lt;/li&gt;
     &lt;li&gt;Eighty-Five Years Isn't All That Long, Really&lt;/li&gt;
     &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;About&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>