jQuery make child div visible on hover (on effective li element only, not parent!)
<p>I've already tried all of the existing posts related to this, but they doesn't work as I want it...</p>

<p>The HTML:</p>

<pre><code>&lt;ol class="sortable"&gt;
&lt;li&gt;
    &lt;div&gt;
        &lt;a href="#"&gt;Start Page&lt;/a&gt;
        &lt;div class="li_options"&gt;
            &lt;a href="#"&gt;&lt;img src="img/icons/small_add.png" /&gt;&lt;/a&gt;
            &lt;a href="#" onClick="[..]"&gt;&lt;img src="img/icons/small_remove.png" /&gt;&lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="clear"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;ol&gt;
        &lt;li&gt;
            &lt;div&gt;
                &lt;a href="#"&gt;Sub Seite&lt;/a&gt;
                &lt;div class="li_options"&gt;
                    &lt;a href="#"&gt;&lt;img src="img/icons/small_add.png" /&gt;&lt;/a&gt;
                    &lt;a href="#" onClick="[..]"&gt;&lt;img src="img/icons/small_remove.png" /&gt;&lt;/a&gt;
                &lt;/div&gt;
                &lt;div class="clear"&gt;&lt;/div&gt;
            &lt;/div&gt;
            &lt;ol&gt;
                &lt;li&gt;
                    &lt;div&gt;
                        &lt;a href="#"&gt;Sub Sub Seite&lt;/a&gt;
                        &lt;div class="li_options"&gt;
                            &lt;a href="#"&gt;&lt;img src="img/icons/small_add.png" /&gt;&lt;/a&gt;
                            &lt;a href="#" onClick="[..]"&gt;&lt;img src="img/icons/small_remove.png" /&gt;&lt;/a&gt;
                        &lt;/div&gt;
                        &lt;div class="clear"&gt;&lt;/div&gt;
                    &lt;/div&gt;
                &lt;/li&gt;
            &lt;/ol&gt;
        &lt;/li&gt;
    &lt;/ol&gt;
&lt;/li&gt;
&lt;div class="clear"&gt;&lt;/div&gt;
</code></pre>

<p></p>

<p>This should look like this:</p>

<ul>
<li>Start Page
<ul>
<li>Sub Page
<ul>
<li>Sub Page</li>
</ul></li>
</ul></li>
</ul>

<p>I want the div.li_options which is set for every li element to be shown only on hovering element. I know, that the parent's li is also being "hovered" on hovering child elements, but I don't those "li_options" to be displayed.</p>

<p>The best solution so far:</p>

<pre><code>$(document).ready(function() {      
    $('.sortable li').mouseover(function() {
        $(this).children().children('.li_options').show();
    }).mouseout(function() {
        $(this).children().children('.li_options').hide();
    });
});
</code></pre>

<p>But with this, parents aren't being excluded... I don't know how to point on them, because there can be endless levels. Do you know how to get this working?</p>
