How can I exclude these elements from a jQuery selection?

Question

My jQuery:

$("ul.dropdown ul").slideDown("slow");
$("ul.dropdown ul ul").children().hide();

That causes the ones that match the second selector to display for a brief time. How can I exclude the second set from the first set, and only show the first set?

---

My HTML:

    <ul class="dropdown">
        <li style="margin: 0px">
   <span id="header">
    <img src="back.gif" alt='background' style="border:none;" />      
    <span style="position: absolute; top: 5px; left: 2px;">
     <img src="button.gif" style="border:none;" />
    </span>     
    <span style=" position: absolute; top: -5px; left: 70px;">
     <p style="background-color: white; width: 200px; height: 20px; font-size: 1.2em; border: 2px solid blue">Menu</p>
    </span>
   </span>
         <ul class="sub_menu">
           <li><a href="#">Artificial Turf</a></li>
     <li><a href="#">blah</a></li>
           <li id="1">
           <a id="1.1" href="#">Batting Cages</a>
           <ul id="2">
            <li><a href="#">Indoor</a></li>
            <li><a href="#">Outdoor</a></li>
           </ul>
           </li>
           <li><a href="#">Benches &amp; Bleachers</a></li>
           <li><a href="#">Communication Devices</a></li>
           <li><a href="#">Dugouts</a></li>
           <li><a href="#">Fencing &amp; Windscreen</a></li>
           <li><a href="#">Floor Protectors</a></li>
           <li><a href="#">Foul Poles</a></li>
           <li><a href="#">Netting</a></li>
           <li><a href="#">Outdoor Furniture &amp; Storage</a></li>
           <li><a href="#">Outdoor Signs</a></li>
           <li><a href="#">Padding</a></li>
           <li><a href="#">Scoreboards</a></li>
           <li><a href="#">Shade Structures</a></li>
           <li><a href="#"> - VIEW ALL - </a></li>
         </ul>
        </li>
    </ul>

Answer 1

This will probably work:

$("ul.dropdown > li > ul").slideDown("slow");

">" means only direct children (http://docs.jquery.com/Selectors/child#parentchild). So as long as your heirarchy is like this (which, after your edit just now, it appears it does):

<ul>
  <li>
    <ul>
..

it will most likely work. Hopefully relevant variations are obvious...

Answer 2

This could work.

$("ul.dropdown ul:not(ul > ul)").slideDown("slow");
$("ul.dropdown ul ul").children().hide();

Answer 3

This is exactly what the 'not' method is for:

$('ul.dropdown ul').not('ul.dropdown ul ul').slideDown('slow');