jquery - do "something" when hovering over a LI, but not when over containing LI's -

How do I go about doing "something" when hovering over the list item, but do not have list items

Example:

  $ ('# mainnav li') hover (function () {$ (this) .find ('ul'). Stop (true, white). SlideDown (100); $ (this) .find ('a: first'). CSS ({"background-image": 'url (/assets/images/nav_bg2.png)', "color": '#fff' , 'Text-shadow': '1px 1px 1px # 000'})}}, function () {$ (this) .fund ('ul'). Stop (true, true) .slideUp (100); $ ( This) .find ('a: first') .css ({"background-image": 'none', 'color': '# 630872', 'text-shadow': '1px 1px 1px #fff'}); });   
 sample HTML  
  & lt; Div id = "mainnav" & gt; & Lt; Ul & gt; & Lt; Li class = "active nav-home" & gt; & Lt; A href = "/" & gt; Home & lt; / A & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "/ home / welcome" & gt; Welcome & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "/ home / latest-vehicle" & gt; The latest carriers & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; Li class = "new-us-we-are" & gt; & Lt; A href = "/ who-we are" & gt; Who we are & lt; / A & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "/ who we are / history" & gt; History & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "/ who we are / culture" & gt; Culture & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "we people / people" & gt; People & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "who-we are / sight" & gt; Vision & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; Li class = "new-what-what-what" & gt; & Lt; A href = "/ what do we do" & gt; What we do & lt; / A & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "/ what-we tax / services" & gt; Services & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "/ what-what / projects" & gt; Projects & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "/ what-we-tax / portfolio" & gt; Portfolio & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "/ what-we do / charity" & gt; Charity & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; The problem here is that I want to implement some CSS in top series list items, but not for the people below. Code is currently applicable to CSS whenever I hover over a list item within the top-level list items, what does it mean?  
 BTW, this is for a menu, I want the lights above the tabs to remain, while I scroll through the dropdown   
 
 
 If I understand the question correctly  
  $ ('# mainnav & gt; ul & gt; li') Try using Focus (function () {