title: jQuery lavaLamp, misbehaving with child <ul>'s
body: <p>I've been playing around with <a href="http://nixboxdesigns.com/projects/jquery-lavalamp/" rel="nofollow noreferrer">http://nixboxdesigns.com/projects/jquery-lavalamp/</a> for a navigation menu on a new site I'm building and it works great with minimal fuss, I then started wondering if I could add some sub navigation options to the menu and set about building that in. The trouble I'm having is making the lavaLamp plugin ignore nested/child ul/li's.</p>
  
  <p>You can see a live example of the issue here: <a href="http://www.weleasewodewick.com/redesign2" rel="nofollow noreferrer">http://www.weleasewodewick.com/redesign2</a> - hover over the 'Blog' li then over the submenu that pops in.</p>
  
  <p>I won't post the full source for the plugins as it's pretty lengthy but you should be able to view them directly here:</p>
  
  <p><strong>lavaLamp jQuery Plugin</strong></p>
  
  <p><a href="http://www.weleasewodewick.com/redesign2/includes/jquery.lavalamp.js" rel="nofollow noreferrer">http://www.weleasewodewick.com/redesign2/includes/jquery.lavalamp.js</a></p>
  
  <p><strong>Menu Markup</strong></p>
  
  <pre><code>&lt;nav&gt; 
   &lt;article&gt; 
    &lt;ul&gt; 
     &lt;li&gt;&lt;a href="#Home" alt="#"&gt;Root&lt;/a&gt;&lt;/li&gt; 
     &lt;li&gt;&lt;a href="#About" alt="#"&gt;Who?&lt;/a&gt;&lt;/li&gt; 
     &lt;li&gt;&lt;a href="#Projects" alt="#"&gt;Projects&lt;/a&gt;&lt;/li&gt; 
     &lt;li&gt;&lt;a href="#Resume" alt="#"&gt;Blog&lt;/a&gt; 
       &lt;ul class='children'&gt; 
        &lt;li class="page_item page-item-18"&gt;&lt;a href="http://localhost/wordpress/?page_id=18" title="History"&gt;History&lt;/a&gt;&lt;/li&gt; 
        &lt;li class="page_item page-item-13"&gt;&lt;a href="http://localhost/wordpress/?page_id=13" title="Our Company"&gt;Our Company&lt;/a&gt;&lt;/li&gt; 
        &lt;li class="page_item page-item-15"&gt;&lt;a href="http://localhost/wordpress/?page_id=15" title="Our Staff"&gt;Our Staff&lt;/a&gt;&lt;/li&gt; 
       &lt;/ul&gt; 
  &lt;/li&gt; 
      &lt;li&gt;&lt;a href="#Resume" alt="#"&gt;Contact&lt;/a&gt;&lt;/li&gt; 
     &lt;/ul&gt; 
    &lt;/article&gt; 
   &lt;/nav&gt; 
  </code></pre>
  
  <p><strong>lavaLamp Activation</strong></p>
  
  <pre><code>$(function() { $('nav&gt;article&gt;ul').lavaLamp(); });
  </code></pre>
  
  <p>Would really appreciate your input on this issue :)</p>
  
  <p>** Purpose **
  The final resting place of this mockup is a WordPress template, so the nested structure of the menu mostly needs to remain the same.</p>
  
  <p>Much appreciated
  Foxed</p>