Finding list menu elements in DOM with jQuery -

I have a generic horizontal list menu that has ul li items with more ul (which I'm styled to display However, there is a problem using the .slideUp () function to display the child's ul element when waving the mouse over the parents' items.

The HTML code I have written so far!

Any help would be appreciated. Thanks :)

  & Lt; Script type = "text / javascript" & gt; $ (Document) .ready (function () {$ ('# h le'). Hover (function () {// its submenu $ ('ul', it shows). Slidedown (100);}, function ) {// Hide your submenu $ ('ul', this). SliderUp (100);}}}}    
 and HTML:  
  
 
 
 gt; & lt; a href = "#" & gt; & lt; l & gt; 
  gt;      & lt; / li & gt; 
  
  Any type of item   
 
 
 
  # "& Gt; Items E & lt; / a & gt; & lt; / li & gt; & lt; li & gt;; & lt; a href =" # "& gt; Item F & lt; / a & Lt; / li & gt; & lt; / ul & gt; & lt; / li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Menu B & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; Menu  gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Item A & lt; / A & gt; ; & Lt; Li & gt; & Lt; A href = "#" & gt; Item B & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Item C & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Menu D & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Menu E & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt;   
 Oh and CSS just have a problem with it, whether: D  
  #nav {text-align: center; Swim left; Width: 1000px; } #nav ul {list-style: none; Swim left; Margin: 0px; Padding: 0px; } # Nav ul li {float: left; Margin: 0px; Padding: 0px; } #nav ul li a {background-image: url (../ images / menu_sprite.jpg); Repeat Background: No Repetition; Background-position: 0 px 0 px; Color: #ffffff; Display area; Text-decoration: none; Width: 121px; Height: 31px; Padding: 4px 0px 0px 0px; } #nav ul li a: Hover {background-repeat: no-repeat; Background-position: 0x-35px; } # NAV ul li ul {List-style: none; Swim left; Margin: 0px; Padding: 0px; Status: Completed; Display area; Z-index: 100; display none; } #nav ul li ul li {float: none; }    
 
 
 Try it out:  
  $ (document) ) .ready (function () {$ ('# h a'). Hover (function () {// your submenu $ (this shows) .next ('ul') Slidedown (100);}, function () {// Hide your submenu $ (this) • No. ('ul') SlideUp (100);});})