Using isotope.js , deeper levels are getting affected

Question

I'm using isotope.js to make a megamenu, and have the UL's within the megamenu stack in an orderly fashion. So essentially I have the following HTML:

<ul>
  <li>ABOUT
    <ul>
      <li>We're Great</li>
      <li>We're Really Great</li>
    </ul>
  </li>
  <li>DIVISIONS
    <ul class="level-2">
      <li>Category One
        <ul class="level-3">
          <li>Item One</li>
          <li>Item Two</li>
        </ul>
      </li>
    </ul>
    <ul class="level-2">
      <li>Category Two
        <ul class="level-3">
          <li>Item One</li>
          <li>Item Two</li>
          <li>Item Three</li>
          <li>Item Four</li>
        </ul>
      </li>
    </ul>
    <ul >
      <li>Category Three
        <ul class="level-3">
          <li>Item One</li>
          <li>Item Two</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Products
    <ul>
      <li>Product One</li>
      <li>Product Two</li>
    </ul>
  </li>
</ul>

What I need, is for the LI's within the UL with the class "level-2", to stack together nicely in the megamenu, and have isotope.js applied to them.

Simple enough, except what isotope seems to do for me, is when I use the following JS:

var $container = $('ul.level-2');

$container.isotope({
    itemSelector: 'li'
});

It applies isotoping to the li's even within the level-3 class of UL... which I only want it to be applied to that ONE layer of UL, so they stack friendly, but I don't want the deeper LI's to have anything happen, they should just be normal within their respective UL's.

I have position:relative on the containing UL's, and the LI's are floated left with display: block on them as well. Not sure what I might be missing!!

Hopefully this actually makes sense. Anyone able to point me in the right direction?